← All changes
|
assets/js/packages/editor-interactions/editor-interactions.js
+2080
-2
4.1.2
→
4.3.2
View file →
| @@ -1,3 +1,2081 @@ | ||
| 1 | -/*! For license information please see editor-interactions.js.LICENSE.txt */ | |
| 2 | -!function(){"use strict";var e={"./packages/packages/core/editor-interactions/src/commands/get-clipboard-elements.ts":function(e,t,n){function getClipboardElements(e="clipboard"){try{const t=JSON.parse(localStorage.getItem("elementor")??"{}");return t[e]?.elements}catch{return}}n.r(t),n.d(t,{getClipboardElements:function(){return getClipboardElements}})},"./packages/packages/core/editor-interactions/src/commands/paste-interactions.ts":function(e,t,n){n.r(t),n.d(t,{initPasteInteractionsCommand:function(){return initPasteInteractionsCommand}});var r=n("@elementor/editor-elements"),o=n("@elementor/editor-v1-adapters"),i=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-interactions/src/utils/is-supported-interaction-item.ts"),c=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),s=n("./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts"),l=n("./packages/packages/core/editor-interactions/src/commands/get-clipboard-elements.ts");function isAtomicContainer(e){const t=e?.model.get("widgetType")||e?.model.get("elType"),n=(0,r.getWidgetsCache)(),o=n?.[t];return Boolean(o?.atomic_props_schema)}function initPasteInteractionsCommand(){const e=(0,o.undoable)({do:({containers:e,newInteractions:t})=>{const n=function regenerateInteractionIds(e){const t=structuredClone(e);return t.items?.forEach(e=>{"interaction-item"===e.$$type&&e.value&&(e.value.interaction_id=(0,c.createString)((0,s.generateTempInteractionId)()))}),t}(t);return e.map(e=>{const t=e.id,o=(0,r.getElementInteractions)(t);return(0,r.updateElementInteractions)({elementId:t,interactions:n}),{elementId:t,previous:o??{version:1,items:[]}}})},undo:(e,t)=>{t.forEach(({elementId:e,previous:t})=>{(0,r.updateElementInteractions)({elementId:e,interactions:t.items?.length?t:void 0})})}},{title:({containers:e})=>function getTitleForContainers(e){return e.length>1?(0,i.__)("Elements","elementor"):(0,r.getElementLabel)(e[0].id)}(e),subtitle:(0,i.__)("Interactions Pasted","elementor")});(0,o.__privateListenTo)((0,o.commandStartEvent)("document/elements/paste-interactions"),t=>{const n=t.args,o=n.containers??(n.container?[n.container]:[]),i=n.storageKey??"clipboard";if(!o.length)return;const c=(0,l.getClipboardElements)(i),[s]=c??[];if(!s)return;const u=function normalizeClipboardInteractions(e){if(!e)return null;const t="string"==typeof e?JSON.parse(e):e,n={version:t?.version??1,items:t?.items?.filter(e=>(0,a.isSupportedInteractionItem)(e))??[]};return n.items.length?n:null}(s.interactions);if(!u)return;const p=o.filter(e=>(0,r.getContainer)(e.id)).filter(isAtomicContainer);p.length&&e({containers:p,newInteractions:u})})}},"./packages/packages/core/editor-interactions/src/components/controls/direction.tsx":function(e,t,n){n.r(t),n.d(t,{Direction:function(){return Direction}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/icons"),a=n("@elementor/ui"),c=n("@wordpress/i18n");const s={top:"vertical",bottom:"vertical",left:"horizontal",right:"horizontal"};function Direction({value:e,onChange:t,interactionType:n}){const l="in"===n,u=(0,r.useMemo)(()=>[{dir:"top",label:l?(0,c.__)("From top","elementor"):(0,c.__)("To top","elementor"),Icon:l?i.ArrowDownSmallIcon:i.ArrowUpSmallIcon},{dir:"bottom",label:l?(0,c.__)("From bottom","elementor"):(0,c.__)("To bottom","elementor"),Icon:l?i.ArrowUpSmallIcon:i.ArrowDownSmallIcon},{dir:"left",label:l?(0,c.__)("From left","elementor"):(0,c.__)("To left","elementor"),Icon:l?i.ArrowRightIcon:i.ArrowLeftIcon},{dir:"right",label:l?(0,c.__)("From right","elementor"):(0,c.__)("To right","elementor"),Icon:l?i.ArrowLeftIcon:i.ArrowRightIcon}],[l]),p=(0,r.useMemo)(()=>function parseValue(e){return e.split("-").filter(Boolean)}(e),[e]);return r.createElement(o.StyledToggleButtonGroup,{size:"tiny",justify:"end",sx:{display:"grid",gridTemplateColumns:"repeat(4, minmax(0, 25%))",width:"100%"}},u.map(({dir:e,label:n,Icon:i})=>r.createElement(a.Tooltip,{key:e,title:n,disableFocusListener:!0,placement:"top"},r.createElement(o.StyledToggleButton,{value:e,selected:p.includes(e),"aria-label":n,size:"tiny",isPlaceholder:!1,onChange:()=>{const n=function toggleDirection(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e.filter(e=>s[e]!==s[t]),t]}(p,e);t(function serializeValue(e){const t=e.find(e=>"top"===e||"bottom"===e),n=e.find(e=>"left"===e||"right"===e);return t&&n?`${t}-${n}`:e[0]??""}(n))}},r.createElement(i,{fontSize:"tiny"})))))}},"./packages/packages/core/editor-interactions/src/components/controls/easing.tsx":function(e,t,n){n.r(t),n.d(t,{BASE_EASINGS:function(){return l},EASING_OPTIONS:function(){return s},Easing:function(){return Easing}});var r=n("react"),o=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-interactions/src/ui/promotion-select.tsx"),a=n("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx");const c={target_name:"interactions_easing",location_l2:"interactions"},s={easeIn:(0,o.__)("Ease In","elementor"),easeInOut:(0,o.__)("Ease In Out","elementor"),easeOut:(0,o.__)("Ease Out","elementor"),backIn:(0,o.__)("Back In","elementor"),backInOut:(0,o.__)("Back In Out","elementor"),backOut:(0,o.__)("Back Out","elementor"),linear:(0,o.__)("Linear","elementor")},l=["easeIn"];function Easing({}){const e=Object.fromEntries(Object.entries(s).filter(([e])=>l.includes(e))),t=Object.fromEntries(Object.entries(s).filter(([e])=>!l.includes(e)));return r.createElement(i.PromotionSelect,{value:a.DEFAULT_VALUES.easing,baseOptions:e,disabledOptions:t,promotionContent:(0,o.__)("Upgrade to control the smoothness of the interaction.","elementor"),upgradeUrl:"https://go.elementor.com/go-pro-interactions-easing-modal/",trackingData:c})}},"./packages/packages/core/editor-interactions/src/components/controls/effect-type.tsx":function(e,t,n){n.r(t),n.d(t,{EffectType:function(){return EffectType}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@wordpress/i18n");function EffectType({value:e,onChange:t}){const n=[{value:"in",label:(0,i.__)("In","elementor"),renderContent:()=>(0,i.__)("In","elementor"),showTooltip:!0},{value:"out",label:(0,i.__)("Out","elementor"),renderContent:()=>(0,i.__)("Out","elementor"),showTooltip:!0}];return r.createElement(o.ToggleButtonGroupUi,{items:n,exclusive:!0,onChange:t,value:e})}},"./packages/packages/core/editor-interactions/src/components/controls/effect.tsx":function(e,t,n){n.r(t),n.d(t,{BASE_EFFECTS:function(){return l},EFFECT_OPTIONS:function(){return s},Effect:function(){return Effect}});var r=n("react"),o=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-interactions/src/ui/promotion-select.tsx"),a=n("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx");const c={target_name:"interactions_effect",location_l2:"interactions"},s={fade:(0,o.__)("Fade","elementor"),slide:(0,o.__)("Slide","elementor"),scale:(0,o.__)("Scale","elementor"),custom:(0,o.__)("Custom","elementor")},l=["fade","slide","scale"];function Effect({value:e,onChange:t}){const n=Object.fromEntries(Object.entries(s).filter(([e])=>l.includes(e))),u=Object.fromEntries(Object.entries(s).filter(([e])=>!l.includes(e)));return r.createElement(i.PromotionSelect,{value:e in n?e:a.DEFAULT_VALUES.effect,onChange:t,baseOptions:n,disabledOptions:u,promotionLabel:(0,o.__)("PRO effects","elementor"),promotionContent:(0,o.__)("Upgrade to further customize your animation with opacity, scale, move, rotate and more.","elementor"),upgradeUrl:"https://go.elementor.com/go-pro-interactions-custom-effect-modal/",trackingData:c})}},"./packages/packages/core/editor-interactions/src/components/controls/repeat.tsx":function(e,t,n){n.r(t),n.d(t,{REPEAT_OPTIONS:function(){return u},REPEAT_TOOLTIPS:function(){return p},Repeat:function(){return Repeat}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/icons"),a=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-interactions/src/ui/interactions-promotion-chip.tsx"),s=n("./packages/packages/core/editor-interactions/src/ui/promotion-overlay-layout.tsx");const l={target_name:"interactions_repeat",location_l2:"interactions"},u={times:(0,a.__)("times","elementor"),loop:(0,a.__)("loop","elementor")},p={times:(0,a.__)("Enable number","elementor"),loop:(0,a.__)("Infinite repeat","elementor")};function Repeat(){const e=(0,r.useRef)(null),t=[{value:u.times,disabled:!0,label:p.times,renderContent:({size:e})=>r.createElement(i.Number123Icon,{fontSize:e}),showTooltip:!0},{value:u.loop,disabled:!0,label:p.loop,renderContent:({size:e})=>r.createElement(i.RepeatIcon,{fontSize:e}),showTooltip:!0}];return r.createElement(s.PromotionOverlayLayout,{ref:e,promotionChip:r.createElement(c.InteractionsPromotionChip,{content:(0,a.__)("Upgrade to control how many times the animation repeats.","elementor"),upgradeUrl:"https://go.elementor.com/go-pro-interactions-repeat-modal/",anchorRef:e,trackingData:l})},r.createElement(o.ToggleButtonGroupUi,{items:t,exclusive:!0,onChange:()=>{},value:""}))}},"./packages/packages/core/editor-interactions/src/components/controls/replay.tsx":function(e,t,n){n.r(t),n.d(t,{BASE_REPLAY:function(){return p},REPLAY_OPTIONS:function(){return u},Replay:function(){return Replay}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/icons"),a=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-interactions/src/ui/interactions-promotion-chip.tsx"),s=n("./packages/packages/core/editor-interactions/src/ui/promotion-overlay-layout.tsx");const l={target_name:"interactions_replay",location_l2:"interactions"},u={no:(0,a.__)("No","elementor"),yes:(0,a.__)("Yes","elementor")},p=["no"];function Replay({onChange:e}){const t=(0,r.useRef)(null),n=[{value:!1,disabled:!1,label:u.no,renderContent:({size:e})=>r.createElement(i.MinusIcon,{fontSize:e}),showTooltip:!0},{value:!0,disabled:!0,label:u.yes,renderContent:({size:e})=>r.createElement(i.CheckIcon,{fontSize:e}),showTooltip:!0}];return r.createElement(s.PromotionOverlayLayout,{ref:t,promotionChip:r.createElement(c.InteractionsPromotionChip,{content:(0,a.__)("Upgrade to run the animation every time its trigger occurs.","elementor"),upgradeUrl:"https://go.elementor.com/go-pro-interactions-replay-modal/",anchorRef:t,trackingData:l})},r.createElement(o.ToggleButtonGroupUi,{items:n,exclusive:!0,onChange:e,value:!1}))}},"./packages/packages/core/editor-interactions/src/components/controls/time-frame-indicator.tsx":function(e,t,n){n.r(t),n.d(t,{TimeFrameIndicator:function(){return TimeFrameIndicator}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("./packages/packages/core/editor-interactions/src/configs/time-constants.ts"),a=n("./packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts");function TimeFrameIndicator({value:e,onChange:t,defaultValue:n}){const c=(0,a.parseSizeValue)(e,i.TIME_UNITS,n,i.DEFAULT_TIME_UNIT),s=(0,r.useCallback)(e=>{t((0,a.formatSizeValue)(e))},[t]);return r.createElement(o.SizeComponent,{units:i.TIME_UNITS,value:c,setValue:s,onBlur:e=>{e.target.value||s((0,a.parseSizeValue)(n,i.TIME_UNITS,void 0,i.DEFAULT_TIME_UNIT))},InputProps:{inputProps:{min:0}}})}},"./packages/packages/core/editor-interactions/src/components/controls/trigger.tsx":function(e,t,n){n.r(t),n.d(t,{BASE_TRIGGERS:function(){return l},TRIGGER_OPTIONS:function(){return s},Trigger:function(){return Trigger}});var r=n("react"),o=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-interactions/src/ui/promotion-select.tsx"),a=n("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx");const c={target_name:"interactions_trigger",location_l2:"interactions"},s={load:(0,o.__)("Page load","elementor"),scrollIn:(0,o.__)("Scroll into view","elementor"),scrollOn:(0,o.__)("While scrolling","elementor"),hover:(0,o.__)("On hover","elementor"),click:(0,o.__)("On click","elementor")},l=["load","scrollIn"];function Trigger({value:e,onChange:t}){const n=Object.fromEntries(Object.entries(s).filter(([e])=>l.includes(e))),u=Object.fromEntries(Object.entries(s).filter(([e])=>!l.includes(e)));return r.createElement(i.PromotionSelect,{value:e in n?e:a.DEFAULT_VALUES.trigger,onChange:t,baseOptions:n,disabledOptions:u,promotionLabel:(0,o.__)("PRO triggers","elementor"),promotionContent:(0,o.__)("Upgrade to unlock more interactions triggers.","elementor"),upgradeUrl:"https://go.elementor.com/go-pro-interactions-triggers-modal/",trackingData:c})}},"./packages/packages/core/editor-interactions/src/components/empty-state.tsx":function(e,t,n){n.r(t),n.d(t,{EmptyState:function(){return EmptyState}});var r=n("react"),o=n("@elementor/icons"),i=n("@elementor/ui"),a=n("@wordpress/i18n");const EmptyState=({onCreateInteraction:e})=>r.createElement(i.Stack,{alignItems:"center",justifyContent:"center",height:"100%",color:"text.secondary",sx:{p:2.5,pt:8,pb:5.5},gap:1.5},r.createElement(o.SwipeIcon,{fontSize:"large"}),r.createElement(i.Typography,{align:"center",variant:"subtitle2"},(0,a.__)("Animate elements with Interactions","elementor")),r.createElement(i.Typography,{align:"center",variant:"caption",maxWidth:"170px"},(0,a.__)("Add entrance animations and effects triggered by user interactions such as page load or scroll.","elementor")),r.createElement(i.Button,{variant:"outlined",color:"secondary",size:"small",sx:{mt:1},onClick:e},(0,a.__)("Create an interaction","elementor")))},"./packages/packages/core/editor-interactions/src/components/field.tsx":function(e,t,n){n.r(t),n.d(t,{Field:function(){return Field}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/ui");const Field=({label:e,children:t})=>r.createElement(i.Grid,{item:!0,xs:12,"aria-label":`${e} control`},r.createElement(o.PopoverGridContainer,null,r.createElement(i.Grid,{item:!0,xs:6},r.createElement(o.ControlFormLabel,null,e)),r.createElement(i.Grid,{item:!0,xs:6},t)))},"./packages/packages/core/editor-interactions/src/components/interaction-details.tsx":function(e,t,n){n.r(t),n.d(t,{DEFAULT_VALUES:function(){return g},InteractionDetails:function(){return InteractionDetails}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/ui"),a=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-interactions/src/interactions-controls-registry.ts"),s=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),l=n("./packages/packages/core/editor-interactions/src/utils/resolve-direction.ts"),u=n("./packages/packages/core/editor-interactions/src/utils/scroll-interaction-event.ts"),p=n("./packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts"),m=n("./packages/packages/core/editor-interactions/src/components/controls/time-frame-indicator.tsx"),d=n("./packages/packages/core/editor-interactions/src/components/field.tsx");const g={trigger:"load",effect:"fade",type:"in",direction:"",duration:600,delay:0,replay:!1,easing:"easeIn",relativeTo:"viewport",repeat:"",times:1,start:85,end:15},f=["load","scrollOn","hover","click"],controlVisibilityConfig_replay=e=>!f.includes(e.trigger),controlVisibilityConfig_custom=e=>"custom"===e.effect,controlVisibilityConfig_effectType=e=>"custom"!==e.effect,controlVisibilityConfig_direction=e=>"custom"!==e.effect,controlVisibilityConfig_relativeTo=e=>"scrollOn"===e.trigger,controlVisibilityConfig_start=e=>"scrollOn"===e.trigger,controlVisibilityConfig_end=e=>"scrollOn"===e.trigger,controlVisibilityConfig_repeat=e=>"scrollOn"!==e.trigger,controlVisibilityConfig_times=e=>"scrollOn"!==e.trigger&&"times"===e.repeat,controlVisibilityConfig_duration=e=>!("scrollOn"===e.trigger),controlVisibilityConfig_delay=e=>!("scrollOn"===e.trigger);function normalizeTimesValue(e,t){const n=Number(e);return Number.isFinite(n)?Math.max(1,Math.floor(n)):t}function useControlComponent(e,t=!0){return(0,r.useMemo)(()=>t?(0,c.getInteractionsControl)(e)?.component??null:null,[e,t])}const InteractionDetails=({interaction:e,onChange:t,onPlayInteraction:n})=>{const c=(0,s.extractString)(e.trigger,g.trigger),f=(0,s.extractString)(e.animation.value.effect,g.effect),_=e.animation.value.custom_effect,I=(0,s.extractString)(e.animation.value.type,g.type),k=(0,s.extractString)(e.animation.value.direction,g.direction),v=(0,s.extractSize)(e.animation.value.timing_config.value.duration),E=(0,s.extractSize)(e.animation.value.timing_config.value.delay),y=(0,s.extractBoolean)(e.animation.value.config?.value.replay,g.replay),b=(0,s.extractString)(e.animation.value.config?.value.easing,g.easing),h=(0,s.extractString)(e.animation.value.config?.value.relativeTo,g.relativeTo),T=e.animation.value.config?.value,x=(0,s.extractString)(T?.repeat,g.repeat),S=normalizeTimesValue(T?.times?.value,g.times),C=(0,s.extractSize)(e.animation.value.config?.value.start,g.start),w=(0,s.extractSize)(e.animation.value.config?.value.end,g.end),O={trigger:c,effect:f,type:I,direction:k,duration:v,delay:E,easing:b,replay:y,relativeTo:h,repeat:x,times:S,start:C,end:w,customEffects:_},P=useControlComponent("trigger",!0),R=useControlComponent("effect"),z=useControlComponent("replay",controlVisibilityConfig_replay(O)),A=useControlComponent("relativeTo",controlVisibilityConfig_relativeTo(O)),N=useControlComponent("start",controlVisibilityConfig_start(O)),D=useControlComponent("end",controlVisibilityConfig_end(O)),L=useControlComponent("customEffects",controlVisibilityConfig_custom(O)),$=useControlComponent("effectType",controlVisibilityConfig_effectType(O)),M=useControlComponent("direction",controlVisibilityConfig_direction(O)),U=useControlComponent("repeat",controlVisibilityConfig_repeat(O)),F=useControlComponent("times",controlVisibilityConfig_times(O)),B=useControlComponent("easing"),updateInteraction=r=>{const o=(0,l.resolveDirection)("direction"in r,r.effect,r.direction,k,f),i={...e,interaction_id:e.interaction_id,trigger:(0,s.createString)(r.trigger??c),animation:(0,s.createAnimationPreset)({effect:r.effect??f,type:r.type??I,direction:o,duration:r.duration??v,delay:r.delay??E,replay:r.replay??y,easing:r.easing??b,relativeTo:r.relativeTo??h,repeat:r.repeat??x,times:r.times??S,start:r.start??C,end:r.end??w,customEffects:r.customEffects??_})};t(i),(0,u.syncGridOverlay)(r.trigger??c,r.start??C,r.end??w,r.relativeTo??h);const a=(0,s.extractString)(i.interaction_id);setTimeout(()=>{n(a)},0)};return r.createElement(o.PopoverContent,{p:1.5},r.createElement(i.Grid,{container:!0,spacing:1.5},P&&r.createElement(d.Field,{label:(0,a.__)("Trigger","elementor")},r.createElement(P,{value:c,onChange:e=>updateInteraction({trigger:e})})),z&&r.createElement(d.Field,{label:(0,a.__)("Replay","elementor")},r.createElement(z,{value:y,onChange:e=>updateInteraction({replay:e}),disabled:!0}))),r.createElement(i.Divider,null),r.createElement(i.Grid,{container:!0,spacing:1.5},R&&r.createElement(d.Field,{label:(0,a.__)("Effect","elementor")},r.createElement(R,{value:f,onChange:e=>updateInteraction({effect:e})})),L&&r.createElement(d.Field,{label:(0,a.__)("Custom Effect","elementor")},r.createElement(L,{value:_,onChange:e=>updateInteraction({customEffects:e})})),$&&r.createElement(d.Field,{label:(0,a.__)("Type","elementor")},r.createElement($,{value:I,onChange:e=>updateInteraction({type:e})})),M&&r.createElement(d.Field,{label:(0,a.__)("Direction","elementor")},r.createElement(M,{value:k,onChange:e=>updateInteraction({direction:e}),interactionType:I})),U&&r.createElement(d.Field,{label:(0,a.__)("Repeat","elementor")},r.createElement(U,{value:x,onChange:e=>updateInteraction({repeat:e})})),F&&r.createElement(d.Field,{label:(0,a.__)("Times","elementor")},r.createElement(F,{value:S,onChange:e=>updateInteraction({times:normalizeTimesValue(e,g.times)})})),controlVisibilityConfig_duration(O)&&r.createElement(d.Field,{label:(0,a.__)("Duration","elementor")},r.createElement(m.TimeFrameIndicator,{value:String(v),onChange:e=>updateInteraction({duration:e}),defaultValue:g.duration})),controlVisibilityConfig_delay(O)&&r.createElement(d.Field,{label:(0,a.__)("Delay","elementor")},r.createElement(m.TimeFrameIndicator,{value:String(E),onChange:e=>updateInteraction({delay:e}),defaultValue:g.delay}))),controlVisibilityConfig_relativeTo(O)&&A&&r.createElement(r.Fragment,null,r.createElement(i.Divider,null),r.createElement(i.Grid,{container:!0,spacing:1.5},N&&r.createElement(d.Field,{label:(0,a.__)("Start","elementor")},r.createElement(N,{value:(0,p.parseSizeValue)(C,["%"]).size?.toString()??"",onChange:e=>updateInteraction({start:e})})),D&&r.createElement(d.Field,{label:(0,a.__)("End","elementor")},r.createElement(D,{value:(0,p.parseSizeValue)(w,["%"]).size?.toString()??"",onChange:e=>updateInteraction({end:e})})),r.createElement(d.Field,{label:(0,a.__)("Relative To","elementor")},r.createElement(A,{value:h,onChange:e=>updateInteraction({relativeTo:e})}))),r.createElement(i.Divider,null)),B&&r.createElement(i.Grid,{container:!0,spacing:1.5},r.createElement(d.Field,{label:(0,a.__)("Easing","elementor")},r.createElement(B,{value:b,onChange:e=>{updateInteraction({easing:e})}}))))}},"./packages/packages/core/editor-interactions/src/components/interaction-settings.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionSettings:function(){return InteractionSettings}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/editor-responsive"),a=n("@elementor/ui"),c=n("@wordpress/i18n"),s=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const l="tiny",InteractionSettings=({interaction:e,onChange:t})=>{const n=(0,i.useBreakpoints)(),u=(0,r.useMemo)(()=>n.map(e=>({label:e.label,value:String(e.id)})),[n]),[p,m]=(0,r.useState)(()=>{const t=(0,s.extractExcludedBreakpoints)(e.breakpoints).filter(e=>u.some(({value:t})=>t===e));return u.filter(({value:e})=>!t.includes(e))}),d=(0,r.useCallback)((n,r)=>{m(r);const o=r.map(e=>e.value),i=u.filter(e=>!o.includes(e.value)).map(e=>e.value),a={...e,...i.length>0&&{breakpoints:(0,s.createInteractionBreakpoints)(i)}};0===i.length&&delete a.breakpoints,t(a)},[e,u,t]);return r.createElement(o.PopoverContent,{p:1.5},r.createElement(a.Grid,{container:!0,spacing:1.5},r.createElement(a.Grid,{item:!0,xs:12},r.createElement(a.Stack,{direction:"column",gap:1},r.createElement(o.ControlFormLabel,{sx:{width:"100%"}},(0,c.__)("Trigger on","elementor")),r.createElement(a.Autocomplete,{fullWidth:!0,multiple:!0,value:p,onChange:d,size:l,options:u,isOptionEqualToValue:(e,t)=>e.value===t.value,renderInput:e=>r.createElement(a.TextField,e),renderTags:(e,t)=>e.map((e,n)=>{const{key:o,...i}=t({index:n});return r.createElement(a.Chip,_extends({key:o,size:l,label:e.label},i))})})))))}},"./packages/packages/core/editor-interactions/src/components/interactions-list-item.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsListItem:function(){return InteractionsListItem}});var r=n("react"),o=n("@elementor/ui"),i=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-interactions/src/contexts/interactions-item-context.tsx"),c=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),s=n("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx"),l=n("./packages/packages/core/editor-interactions/src/components/interaction-settings.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const InteractionsListItem=({index:e,value:t})=>{const{getTabsProps:n,getTabProps:u,getTabPanelProps:p}=(0,o.useTabs)("details"),m=(0,a.useInteractionItemContext)(),d=(0,r.useCallback)(t=>{m?.onInteractionChange(e,t)},[m,e]),g=(0,r.useCallback)(e=>{m?.onPlayInteraction(e)},[m]),f=(0,c.extractString)(t.value.interaction_id);return r.createElement(r.Fragment,null,r.createElement(o.Tabs,_extends({size:"small",variant:"fullWidth","aria-label":(0,i.__)("Interaction","elementor")},n()),r.createElement(o.Tab,_extends({label:(0,i.__)("Details","elementor")},u("details"))),r.createElement(o.Tab,_extends({label:(0,i.__)("Settings","elementor")},u("settings")))),r.createElement(o.Divider,null),r.createElement(o.TabPanel,_extends({sx:{p:0}},p("details")),r.createElement(s.InteractionDetails,{key:f,interaction:t.value,onChange:d,onPlayInteraction:g})),r.createElement(o.TabPanel,_extends({sx:{p:0}},p("settings")),r.createElement(l.InteractionSettings,{key:f,interaction:t.value,onChange:d})))}},"./packages/packages/core/editor-interactions/src/components/interactions-list.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsList:function(){return InteractionsList},MAX_NUMBER_OF_INTERACTIONS:function(){return f}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/icons"),a=n("@elementor/ui"),c=n("@wordpress/i18n"),s=n("./packages/packages/core/editor-interactions/src/contexts/interactions-context.tsx"),l=n("./packages/packages/core/editor-interactions/src/contexts/interactions-item-context.tsx"),u=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),p=n("./packages/packages/core/editor-interactions/src/utils/scroll-interaction-event.ts"),m=n("./packages/packages/core/editor-interactions/src/utils/tracking.ts"),d=n("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx"),g=n("./packages/packages/core/editor-interactions/src/components/interactions-list-item.tsx");const f=5;function InteractionsList(e){const{interactions:t,onSelectInteractions:n,onPlayInteraction:_,triggerCreateOnShowEmpty:I}=e,{elementId:k}=(0,s.useInteractionsContext)(),v=(0,r.useRef)(!1),E=(0,r.useRef)(new Set),y=(0,r.useCallback)(e=>{n(e)},[n]);(0,r.useEffect)(()=>{if(I&&!v.current&&(!t.items||0===t.items?.length)){v.current=!0;const e=(0,u.createDefaultInteractionItem)();E.current.add((0,u.extractString)(e.value.interaction_id));y({version:1,items:[e]})}},[I,t.items,y]);const b=(0,r.useMemo)(()=>t.items?.length>=f,[t.items?.length]),h=b?r.createElement(a.Alert,{color:"secondary",icon:r.createElement(i.InfoCircleFilledIcon,null),size:"small"},r.createElement(a.AlertTitle,null,(0,c.__)("Interactions","elementor")),r.createElement(a.Box,{component:"span"},(0,c.__)("You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.","elementor"))):void 0,T=(0,r.useCallback)((e,n,r)=>{if(y({...t,items:e}),"add"===r?.action?.type){const e=r.action.payload[0]?.item;e&&E.current.add((0,u.extractString)(e.value.interaction_id))}},[t,y]),x=(0,r.useCallback)((e,n)=>{const r=structuredClone(t.items);r[e]={$$type:"interaction-item",value:n},y({...t,items:r})},[t,y]),S=(0,r.useMemo)(()=>({onInteractionChange:x,onPlayInteraction:_}),[x,_]);return r.createElement(l.InteractionItemContextProvider,{value:S},r.createElement(o.Repeater,{openOnAdd:!0,openItem:I?0:void 0,label:(0,c.__)("Interactions","elementor"),values:t.items,setValues:T,showDuplicate:!1,showToggle:!1,isSortable:!1,disableAddItemButton:b,addButtonInfotipContent:h,itemSettings:{initialValues:(0,u.createDefaultInteractionItem)(),Label:({value:e})=>(0,u.buildDisplayLabel)(e.value),Icon:()=>null,Content:g.InteractionsListItem,onPopoverOpen:e=>{const{trigger:t,start:n,end:r,relativeTo:o}=(0,p.extractScrollOverlayParams)(e.value,d.DEFAULT_VALUES);(0,p.syncGridOverlay)(t,n,r,o)},onPopoverClose:e=>{(0,p.dispatchScrollInteraction)(null);const t=(0,u.extractString)(e.value.interaction_id);E.current.has(t)&&(E.current.delete(t),(0,m.trackInteractionCreated)(k,e))},actions:e=>r.createElement(a.Tooltip,{key:"preview",placement:"top",title:(0,c.__)("Preview","elementor")},r.createElement(a.IconButton,{"aria-label":(0,c.__)("Play interaction","elementor"),size:"tiny",onClick:()=>_((0,u.extractString)(e.value.interaction_id))},r.createElement(i.PlayerPlayIcon,{fontSize:"tiny"})))}}))}},"./packages/packages/core/editor-interactions/src/components/interactions-tab.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsTab:function(){return InteractionsTab}});var r=n("react"),o=n("@elementor/session"),i=n("@elementor/ui"),a=n("./packages/packages/core/editor-interactions/src/contexts/interactions-context.tsx"),c=n("./packages/packages/core/editor-interactions/src/contexts/popup-state-context.tsx"),s=n("./packages/packages/core/editor-interactions/src/hooks/use-element-interactions.ts"),l=n("./packages/packages/core/editor-interactions/src/components/empty-state.tsx"),u=n("./packages/packages/core/editor-interactions/src/components/interactions-list.tsx");const InteractionsTab=({elementId:e})=>r.createElement(c.PopupStateProvider,null,r.createElement(InteractionsTabContent,{elementId:e}));function InteractionsTabContent({elementId:e}){const t=(0,s.useElementInteractions)(e),n=(0,r.useState)(!1),i=t?.items?.length||n[0];return r.createElement(o.SessionStorageProvider,{prefix:e},i?r.createElement(a.InteractionsProvider,{elementId:e},r.createElement(InteractionsContent,{firstInteractionState:n})):r.createElement(l.EmptyState,{onCreateInteraction:()=>{n[1](!0)}}))}function InteractionsContent({firstInteractionState:e}){const{interactions:t,setInteractions:n,playInteractions:o}=(0,a.useInteractionsContext)(),c=(0,r.useCallback)(t=>{e[1](!1),n(t||void 0)},[n,e]);return r.createElement(i.Stack,{sx:{m:1,p:1.5},gap:2},r.createElement(u.InteractionsList,{triggerCreateOnShowEmpty:e[0],interactions:t,onSelectInteractions:c,onPlayInteraction:o}))}},"./packages/packages/core/editor-interactions/src/configs/time-constants.ts":function(e,t,n){n.r(t),n.d(t,{DEFAULT_TIME_UNIT:function(){return o},TIME_UNITS:function(){return r}});const r=["s","ms"],o="ms"},"./packages/packages/core/editor-interactions/src/contexts/interactions-context.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsProvider:function(){return InteractionsProvider},useInteractionsContext:function(){return useInteractionsContext}});var r=n("react"),o=n("@elementor/editor-elements"),i=n("@elementor/editor-v1-adapters"),a=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-interactions/src/hooks/use-element-interactions.ts");const s=(0,r.createContext)(null),l={version:1,items:[]},InteractionsProvider=({children:e,elementId:t})=>{const n=(0,c.useElementInteractions)(t);(0,r.useEffect)(()=>{window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"))},[]);const u=n??l,p=(0,r.useMemo)(()=>(0,i.undoable)({do:({interactions:e})=>{const n=(0,o.getElementInteractions)(t);return(0,o.updateElementInteractions)({elementId:t,interactions:e}),n},undo:(e,n)=>{(0,o.updateElementInteractions)({elementId:t,interactions:n?.items?.length?n:void 0})}},{title:(0,o.getElementLabel)(t),subtitle:({operationType:e})=>"apply"===e?(0,a.__)("Interaction Applied","elementor"):(0,a.__)("Interaction Deleted","elementor")}),[t]),m={elementId:t,interactions:u,setInteractions:e=>{const n=e&&0===e.items?.length?void 0:e,r=u.items?.length??0,i=n?.items?.length??0;i>r?p({interactions:n,operationType:"apply"}):i<r?p({interactions:n,operationType:"delete"}):(0,o.updateElementInteractions)({elementId:t,interactions:n})},playInteractions:e=>{(0,o.playElementInteractions)(t,e)}};return r.createElement(s.Provider,{value:m},e)},useInteractionsContext=()=>{const e=(0,r.useContext)(s);if(!e)throw new Error("useInteractionsContext must be used within InteractionsProvider");return e}},"./packages/packages/core/editor-interactions/src/contexts/interactions-item-context.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionItemContextProvider:function(){return InteractionItemContextProvider},useInteractionItemContext:function(){return useInteractionItemContext}});var r=n("react");const o=(0,r.createContext)(null);function InteractionItemContextProvider({value:e,children:t}){return r.createElement(o.Provider,{value:e},t)}function useInteractionItemContext(){const e=(0,r.useContext)(o);if(!e)throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");return e}},"./packages/packages/core/editor-interactions/src/contexts/popup-state-context.tsx":function(e,t,n){n.r(t),n.d(t,{PopupStateProvider:function(){return PopupStateProvider},usePopupStateContext:function(){return usePopupStateContext}});var r=n("react");const o=(0,r.createContext)(void 0),PopupStateProvider=({children:e})=>{const[t,n]=(0,r.useState)(!1),i=(0,r.useCallback)(()=>{n(!0)},[]),a=(0,r.useCallback)(()=>{n(!1)},[]);return r.createElement(o.Provider,{value:{openByDefault:t,triggerDefaultOpen:i,resetDefaultOpen:a}},e)},usePopupStateContext=()=>{const e=(0,r.useContext)(o);if(!e)throw new Error("usePopupStateContext must be used within PopupStateProvider");return e}},"./packages/packages/core/editor-interactions/src/hooks/on-duplicate.ts":function(e,t,n){n.r(t),n.d(t,{initCleanInteractionIdsOnDuplicate:function(){return initCleanInteractionIdsOnDuplicate}});var r=n("@elementor/editor-elements"),o=n("@elementor/editor-v1-adapters"),i=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),a=n("./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts");function initCleanInteractionIdsOnDuplicate(){(0,o.registerDataHook)("after","document/elements/duplicate",(e,t)=>{if(!t||"boolean"==typeof t&&!1===t)return;(Array.isArray(t)?t:[t]).forEach(e=>{!function cleanInteractionIdsRecursive(e){const t=(0,r.getContainer)(e);if(!t)return;(0,r.getAllDescendants)(t).forEach(e=>{!function cleanInteractionIds(e){const t=(0,r.getContainer)(e);if(!t)return;const n=t.model.get("interactions");if(!n||!n.items)return;const o=structuredClone(n);o?.items?.forEach(e=>{"interaction-item"===e.$$type&&e.value&&(e.value.interaction_id=(0,i.createString)((0,a.generateTempInteractionId)()))}),t.model.set("interactions",o)}(e.id)})}(e.id)}),window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"))})}},"./packages/packages/core/editor-interactions/src/hooks/use-element-interactions.ts":function(e,t,n){n.r(t),n.d(t,{useElementInteractions:function(){return useElementInteractions}});var r=n("react"),o=n("@elementor/editor-elements"),i=n("@elementor/editor-v1-adapters"),a=n("./packages/packages/core/editor-interactions/src/utils/filter-interactions.ts");const useElementInteractions=e=>{const[t,n]=(0,r.useState)(()=>{const t=(0,o.getElementInteractions)(e),n=(0,a.filterInteractions)(t?.items??[]);return{version:t?.version??1,items:n}});return(0,i.__privateUseListenTo)((0,i.windowEvent)("elementor/element/update_interactions"),()=>{const t=(0,o.getElementInteractions)(e),r=(0,a.filterInteractions)(t?.items??[]);n({version:t?.version??1,items:r})},[e]),t}},"./packages/packages/core/editor-interactions/src/init.ts":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("@elementor/editor-mcp"),o=n("./packages/packages/core/editor-interactions/src/commands/paste-interactions.ts"),i=n("./packages/packages/core/editor-interactions/src/components/controls/direction.tsx"),a=n("./packages/packages/core/editor-interactions/src/components/controls/easing.tsx"),c=n("./packages/packages/core/editor-interactions/src/components/controls/effect.tsx"),s=n("./packages/packages/core/editor-interactions/src/components/controls/effect-type.tsx"),l=n("./packages/packages/core/editor-interactions/src/components/controls/repeat.tsx"),u=n("./packages/packages/core/editor-interactions/src/components/controls/replay.tsx"),p=n("./packages/packages/core/editor-interactions/src/components/controls/trigger.tsx"),m=n("./packages/packages/core/editor-interactions/src/hooks/on-duplicate.ts"),d=n("./packages/packages/core/editor-interactions/src/interactions-controls-registry.ts"),g=n("./packages/packages/core/editor-interactions/src/interactions-repository.ts"),f=n("./packages/packages/core/editor-interactions/src/mcp/index.ts"),_=n("./packages/packages/core/editor-interactions/src/providers/document-elements-interactions-provider.ts");function init(){try{g.interactionsRepository.register(_.documentElementsInteractionsProvider),(0,m.initCleanInteractionIdsOnDuplicate)(),(0,o.initPasteInteractionsCommand)(),(0,d.registerInteractionsControl)({type:"trigger",component:p.Trigger,options:["load","scrollIn"]}),(0,d.registerInteractionsControl)({type:"easing",component:a.Easing,options:["easeIn"]}),(0,d.registerInteractionsControl)({type:"replay",component:u.Replay,options:["no"]}),(0,d.registerInteractionsControl)({type:"effectType",component:s.EffectType,options:["in","out"]}),(0,d.registerInteractionsControl)({type:"direction",component:i.Direction,options:["top","bottom","left","right"]}),(0,d.registerInteractionsControl)({type:"effect",component:c.Effect,options:["fade","slide","scale"]}),(0,d.registerInteractionsControl)({type:"repeat",component:l.Repeat}),(0,f.initMcpInteractions)((0,r.getMCPByDomain)("interactions",{docs:f.EDITOR_INTERACTIONS_MCP_DESCRIPTION,instructions:f.EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION}))}catch(e){throw e}}},"./packages/packages/core/editor-interactions/src/interactions-controls-registry.ts":function(e,t,n){n.r(t),n.d(t,{getInteractionsControl:function(){return getInteractionsControl},getInteractionsControlOptions:function(){return getInteractionsControlOptions},registerInteractionsControl:function(){return registerInteractionsControl}});const r=new Map;function registerInteractionsControl({type:e,component:t,options:n}){r.set(e,{type:e,component:t,options:n})}function getInteractionsControl(e){return r.get(e)}function getInteractionsControlOptions(e){return r.get(e)?.options??[]}},"./packages/packages/core/editor-interactions/src/interactions-repository.ts":function(e,t,n){n.r(t),n.d(t,{interactionsRepository:function(){return r}});const r=(0,n("./packages/packages/core/editor-interactions/src/utils/create-interactions-repository.ts").createInteractionsRepository)()},"./packages/packages/core/editor-interactions/src/mcp/constants.ts":function(e,t,n){n.r(t),n.d(t,{EDITOR_INTERACTIONS_MCP_DESCRIPTION:function(){return i},EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION:function(){return o},MAX_INTERACTIONS_PER_ELEMENT:function(){return r}});const r=5,o="Everything related to V4 ( Atomic ) interactions.\n# Interactions\n- Create/update/delete interactions\n- Get list of interactions\n- Get details of an interaction\n",i=`MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.\n\t\t** IMPORTANT **\n\t\tUse the "interactions-schema" resource to get the schema of the interactions.\n\t\tActions:\n\t\t- get: Read the current interactions on the element.\n\t\t- add: Add a new interaction (max ${r} per element).\n\t\t- update: Update an existing interaction by its interactionId.\n\t\t- delete: Remove a specific interaction by its interactionId.\n\t\t- clear: Remove all interactions from the element.\n\n\t\tFor add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.\n\t\tUse excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).\n\t\tExample Get Request:\n\t\t{\n\t\t\t"elementId": "123",\n\t\t\t"action": "get",\n\t\t\t"interactionId": "123",\n\t\t\t"animationData": {\n\t\t\t\t"trigger": "click",\n\t\t\t\t"effect": "fade",\n\t\t\t}\n\t\t}\n\t\tExample Add Request:\n\t\t{\n\t\t\t"elementId": "123",\n\t\t\t"action": "add",\n\t\t\t"animationData": {\n\t\t\t\t"effectType": "in",\n\t\t\t\t"direction": "top",\n\t\t\t\t"trigger": "click",\n\t\t\t\t"effect": "fade",\n\t\t\t\t"duration": 1000,\n\t\t\t\t"delay": 0,\n\t\t\t\t"easing": "easeIn",\n\t\t\t\t"excludedBreakpoints": ["mobile", "tablet"],\n\t\t\t}\n\t\t}\n\t\tExample Update Request:\n\t\t{\n\t\t\t"elementId": "123",\n\t\t\t"action": "update",\n\t\t\t"interactionId": "123",\n\t\t\t"animationData": {\n\t\t\t\t"trigger": "click",\n\t\t\t\t"effect": "fade",\n\t\t\t}\n\t\t}\n\t\tExample Delete Request:\n\t\t{\n\t\t\t"elementId": "123",\n\t\t\t"action": "delete",\n\t\t\t"interactionId": "123",\n\t\t}\n\t\tExample Clear Request:\n\t\t{\n\t\t\t"elementId": "123",\n\t\t\t"action": "clear",\n\t\t}`},"./packages/packages/core/editor-interactions/src/mcp/index.ts":function(e,t,n){n.r(t),n.d(t,{EDITOR_INTERACTIONS_MCP_DESCRIPTION:function(){return i.EDITOR_INTERACTIONS_MCP_DESCRIPTION},EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION:function(){return i.EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION},MAX_INTERACTIONS_PER_ELEMENT:function(){return i.MAX_INTERACTIONS_PER_ELEMENT},initMcpInteractions:function(){return initMcpInteractions}});var r=n("./packages/packages/core/editor-interactions/src/mcp/resources/interactions-schema-resource.ts"),o=n("./packages/packages/core/editor-interactions/src/mcp/tools/manage-element-interaction-tool.ts"),i=n("./packages/packages/core/editor-interactions/src/mcp/constants.ts");const initMcpInteractions=e=>{const{setMCPDescription:t}=e;t("Everything related to V4 ( Atomic ) interactions.\n# Interactions\n- Create/update/delete interactions\n- Get list of interactions\n- Get details of an interaction\n"),(0,r.initInteractionsSchemaResource)(e),(0,o.initManageElementInteractionTool)(e)}},"./packages/packages/core/editor-interactions/src/mcp/resources/interactions-schema-resource.ts":function(e,t,n){n.r(t),n.d(t,{INTERACTIONS_SCHEMA_URI:function(){return i},initInteractionsSchemaResource:function(){return initInteractionsSchemaResource}});var r=n("@elementor/utils"),o=n("./packages/packages/core/editor-interactions/src/mcp/tools/schema.ts");const i="elementor://interactions/schema",initInteractionsSchemaResource=e=>{const{resource:t}=e,n=(0,r.isProActive)()?{...o.baseSchema,...o.proSchema}:o.baseSchema;t("interactions-schema",i,{description:"Schema describing all available options for element interactions."},async()=>({contents:[{uri:i,mimeType:"application/json",text:JSON.stringify(n)}]}))}},"./packages/packages/core/editor-interactions/src/mcp/tools/manage-element-interaction-tool.ts":function(e,t,n){n.r(t),n.d(t,{initManageElementInteractionTool:function(){return initManageElementInteractionTool}});var r=n("@elementor/editor-elements"),o=n("@elementor/schema"),i=n("@elementor/utils"),a=n("./packages/packages/core/editor-interactions/src/interactions-repository.ts"),c=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),s=n("./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts"),l=n("./packages/packages/core/editor-interactions/src/mcp/constants.ts"),u=n("./packages/packages/core/editor-interactions/src/mcp/resources/interactions-schema-resource.ts"),p=n("./packages/packages/core/editor-interactions/src/mcp/tools/schema.ts");const m={version:1,items:[]},d=["custom"],initManageElementInteractionTool=e=>{const{addTool:t}=e,n=(0,i.isProActive)()?{...p.baseSchema,...p.proSchema}:p.baseSchema;t({name:"manage-element-interaction",description:"Manage the element interaction.",schema:{elementId:o.z.string().describe("The ID of the element to read or modify interactions on"),action:o.z.enum(["get","add","update","delete","clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),interactionId:o.z.string().optional().describe('Interaction ID — required for update and delete. Obtain from a prior "get" call.'),...n},requiredResources:[{uri:u.INTERACTIONS_SCHEMA_URI,description:"Interactions schema with all available options"},{uri:"elementor://breakpoints/list",description:"Available breakpoint IDs for excludedBreakpoints"}],isDestructive:!0,outputSchema:{success:o.z.boolean().describe("Whether the action was successful"),action:o.z.enum(["get","add","update","delete","clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),elementId:o.z.string().optional().describe("The ID of the element to read or modify interactions on"),interactions:o.z.array(o.z.any()).optional().describe("The interactions on the element"),count:o.z.number().optional().describe("The number of interactions on the element")},handler:e=>{const{elementId:t,action:n,interactionId:o,...i}=e,{effectType:u,...p}=i,g=p.effect,f=u??(g&&!d.includes(g)?"in":void 0),_=a.interactionsRepository.all().find(e=>e.elementId===t),I=_?.interactions??m;if("get"===n){const e=I.items.map(e=>{const{value:t}=e,n=t.animation.value,r=n.timing_config.value,o=n.config.value;return{id:(0,c.extractString)(t.interaction_id),trigger:(0,c.extractString)(t.trigger),effect:(0,c.extractString)(n.effect),effectType:(0,c.extractString)(n.type),direction:(0,c.extractString)(n.direction),duration:(0,c.extractSize)(r.duration),delay:(0,c.extractSize)(r.delay),easing:(0,c.extractString)(o.easing),excludedBreakpoints:(0,c.extractExcludedBreakpoints)(t.breakpoints)}});return{success:!0,elementId:t,action:n,interactions:e,count:e.length}}let k=[...I.items];switch(n){case"add":{if(k.length>=l.MAX_INTERACTIONS_PER_ELEMENT)throw new Error(`Cannot add more than ${l.MAX_INTERACTIONS_PER_ELEMENT} interactions per element. Current count: ${k.length}. Delete an existing interaction first.`);const e=(0,c.createInteractionItem)({interactionId:(0,s.generateTempInteractionId)(),...p,type:f});k=[...k,e];break}case"update":{if(!o)throw new Error("interactionId is required for the update action.");const e=k.findIndex(e=>(0,c.extractString)(e.value.interaction_id)===o);if(-1===e)throw new Error(`Interaction with ID "${o}" not found on element "${t}".`);const n=(0,c.createInteractionItem)({interactionId:o,...p,type:f});k=[...k.slice(0,e),n,...k.slice(e+1)];break}case"delete":{if(!o)throw new Error("interactionId is required for the delete action.");const e=k.length;if(k=k.filter(e=>(0,c.extractString)(e.value.interaction_id)!==o),k.length===e)throw new Error(`Interaction with ID "${o}" not found on element "${t}".`);break}case"clear":k=[]}const v={...I,items:k};try{(0,r.updateElementInteractions)({elementId:t,interactions:v})}catch(e){throw new Error(`Failed to update interactions for element "${t}": ${e instanceof Error?e.message:"Unknown error"}`)}return{success:!0,action:n,elementId:t,count:k.length}}})}},"./packages/packages/core/editor-interactions/src/mcp/tools/schema.ts":function(e,t,n){n.r(t),n.d(t,{baseSchema:function(){return o},proSchema:function(){return i}});var r=n("@elementor/schema");const o={trigger:r.z.enum(["load","scrollIn"]).optional().describe("Event that triggers the animation"),effect:r.z.enum(["fade","slide","scale"]).optional().describe("Animation effect type"),effectType:r.z.enum(["in","out"]).optional().describe("Whether the animation plays in or out"),direction:r.z.enum(["top","bottom","left","right","top-left","top-right","bottom-left","bottom-right"]).optional().describe("Direction of the Animation. Can be one of the following or empty if not needed. At slide effect, this is required field."),duration:r.z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),delay:r.z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),easing:r.z.enum(["easeIn"]).optional().describe('Easing function for the animation. Use "easeIn" for free tier.'),excludedBreakpoints:r.z.array(r.z.enum(["widescreen","desktop","laptop","tablet_extra","tablet","mobile_extra","mobile"])).optional().describe('Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Fetch the "elementor://breakpoints/list" resource to get the valid IDs for the current site. Omit to enable on all breakpoints.')},i={trigger:r.z.enum(["load","scrollIn","scrollOut","scrollOn","hover","click"]).optional().describe("Event that triggers the animation"),effect:r.z.enum(["fade","slide","scale","custom"]).optional().describe("Animation effect type"),easing:r.z.enum(["easeIn","easeInOut","easeOut","backIn","backInOut","backOut","linear"]).optional().describe("Easing function for the animation."),customEffects:r.z.object({keyframes:r.z.array(r.z.object({stop:r.z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),value:r.z.object({opacity:r.z.number().min(0).max(1).describe("The opacity of the keyframe"),scale:r.z.object({x:r.z.number().min(0).max(1).describe("The x scale of the keyframe"),y:r.z.number().min(0).max(1).describe("The y scale of the keyframe")}).optional().describe("The scale of the keyframe"),rotate:r.z.object({x:r.z.number().min(0).max(360).describe("The x rotate of the keyframe"),y:r.z.number().min(0).max(360).describe("The y rotate of the keyframe"),z:r.z.number().min(0).max(360).describe("The z rotate of the keyframe")}).optional().describe("The rotate of the keyframe"),move:r.z.object({x:r.z.number().min(0).max(1).describe("The x move of the keyframe"),y:r.z.number().min(0).max(1).describe("The y move of the keyframe"),z:r.z.number().min(0).max(1).describe("The z move of the keyframe")}).optional().describe("The move of the keyframe"),skew:r.z.object({x:r.z.number().min(0).max(360).describe("The x skew of the keyframe"),y:r.z.number().min(0).max(360).describe("The y skew of the keyframe")}).optional().describe("The skew of the keyframe")})})).describe("The keyframes of the custom effect")}).optional().describe("The custom effect to use for the animation")}},"./packages/packages/core/editor-interactions/src/providers/document-elements-interactions-provider.ts":function(e,t,n){n.r(t),n.d(t,{ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX:function(){return a},documentElementsInteractionsProvider:function(){return c}});var r=n("@elementor/editor-elements"),o=n("@elementor/editor-v1-adapters"),i=n("./packages/packages/core/editor-interactions/src/utils/create-interactions-provider.ts");const a="document-elements-interactions-",c=(0,i.createInteractionsProvider)({key:()=>{const e=(0,r.getCurrentDocumentId)();if(!e){return`${a}pending`}return`${a}${e}`},priority:50,subscribe:e=>(0,o.__privateListenTo)([(0,o.windowEvent)("elementor/element/update_interactions")],()=>e()),actions:{all:()=>(0,r.getElements)().filter(e=>{const t=(0,r.getElementInteractions)(e.id);return!!t&&t?.items?.length>0}).map(e=>{const t=(0,r.getElementInteractions)(e.id);return{elementId:e.id,dataId:e.id,interactions:t||{version:1,items:[]}}})}})},"./packages/packages/core/editor-interactions/src/ui/interactions-promotion-chip.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsPromotionChip:function(){return s}});var r=n("react"),o=n("@elementor/editor-controls"),i=n("@elementor/editor-ui"),a=n("@elementor/ui"),c=n("@wordpress/i18n");const s=(0,r.forwardRef)(({content:e,upgradeUrl:t,anchorRef:n,trackingData:s},l)=>{const[u,p]=(0,r.useState)(!1);(0,i.useCanvasClickHandler)(u,()=>p(!1));const m=(0,r.useCallback)(()=>{p(e=>(e||(0,o.trackViewPromotion)(s),!e))},[s]);(0,r.useImperativeHandle)(l,()=>({toggle:m}),[m]);return r.createElement(i.PromotionPopover,{open:u,title:(0,c.__)("Interactions","elementor"),content:e,ctaText:(0,c.__)("Upgrade now","elementor"),ctaUrl:t,anchorRef:n,placement:n?"right-start":void 0,onClose:e=>{e.stopPropagation(),p(!1)},onCtaClick:()=>(0,o.trackUpgradePromotionClick)(s)},r.createElement(a.Box,{onMouseDown:e=>e.stopPropagation(),onClick:e=>{e.stopPropagation(),m()},sx:{cursor:"pointer",display:"inline-flex",mr:1}},r.createElement(i.PromotionChip,null)))})},"./packages/packages/core/editor-interactions/src/ui/promotion-overlay-layout.tsx":function(e,t,n){n.r(t),n.d(t,{PromotionOverlayLayout:function(){return a}});var r=n("react"),o=n("@elementor/ui");const i="1 / 1",a=(0,r.forwardRef)(({children:e,promotionChip:t},n)=>r.createElement(o.Box,{ref:n,sx:{display:"grid",alignItems:"center"}},r.createElement(o.Box,{sx:{gridArea:i}},e),r.createElement(o.Box,{sx:{gridArea:i,marginInlineEnd:"50%",justifySelf:"end"}},t)))},"./packages/packages/core/editor-interactions/src/ui/promotion-select.tsx":function(e,t,n){n.r(t),n.d(t,{PromotionSelect:function(){return PromotionSelect}});var r=n("react"),o=n("@elementor/editor-ui"),i=n("@elementor/ui"),a=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-interactions/src/ui/interactions-promotion-chip.tsx");function PromotionSelect({value:e,onChange:t,baseOptions:n,disabledOptions:s,promotionLabel:l,promotionContent:u,upgradeUrl:p,trackingData:m}){const d=(0,r.useRef)(null),g=(0,r.useRef)(null);return r.createElement(i.Select,{value:e,onChange:e=>t?.(e.target.value),fullWidth:!0,displayEmpty:!0,size:"tiny",MenuProps:{disablePortal:!0}},Object.entries(n).map(([e,t])=>r.createElement(o.MenuListItem,{key:e,value:e},t)),r.createElement(i.MenuSubheader,{ref:g,sx:{cursor:"pointer",color:"text.tertiary",fontWeight:"400",display:"flex",alignItems:"center"},onMouseDown:e=>{e.stopPropagation(),d.current?.toggle()}},l??(0,a.__)("PRO features","elementor"),r.createElement(c.InteractionsPromotionChip,{content:u,upgradeUrl:p,ref:d,anchorRef:g,trackingData:m})),Object.entries(s).map(([e,t])=>r.createElement(o.MenuListItem,{key:e,value:e,disabled:!0,sx:{pl:3}},t)))}},"./packages/packages/core/editor-interactions/src/utils/create-interactions-provider.ts":function(e,t,n){n.r(t),n.d(t,{createInteractionsProvider:function(){return createInteractionsProvider}});const r=10;function createInteractionsProvider({key:e,priority:t=r,subscribe:n=()=>()=>{},actions:o}){return{getKey:"string"==typeof e?()=>e:e,priority:t,subscribe:n,actions:{all:o.all}}}},"./packages/packages/core/editor-interactions/src/utils/create-interactions-repository.ts":function(e,t,n){n.r(t),n.d(t,{createInteractionsRepository:function(){return createInteractionsRepository}});const createInteractionsRepository=()=>{const e=[],getProviders=()=>e.slice(0).sort((e,t)=>e.priority>t.priority?-1:1);return{all:()=>getProviders().flatMap(e=>e.actions.all()),register:t=>{e.push(t)},subscribe:t=>{const n=e.map(e=>e.subscribe(t));return()=>{n.forEach(e=>e())}},getProviders:getProviders,getProviderByKey:t=>e.find(e=>{try{return e.getKey()===t}catch{return!1}})}}},"./packages/packages/core/editor-interactions/src/utils/custom-effect-to-prop-value.ts":function(e,t,n){n.r(t),n.d(t,{toCustomEffectPropValue:function(){return toCustomEffectPropValue}});const r="deg",toSizePropValue=(e,t="%")=>({$$type:"size",value:{size:e,unit:t}}),toNumberPropValue=e=>({$$type:"number",value:e}),toDimensionalSizePropValue=(e,t,n,r)=>({$$type:e,value:{x:toSizePropValue(t.x??n.x,r),y:toSizePropValue(t.y??n.y,r),z:toSizePropValue(t.z??n.z,r)}}),toKeyframeStopSettingsPropValue=e=>{const t={};if(void 0!==e.opacity){const n=e.opacity<=1?Math.round(100*e.opacity):e.opacity;t.opacity=toSizePropValue(n)}return void 0!==e.scale&&(t.scale=((e,t,n)=>({$$type:e,value:{x:toNumberPropValue(t.x??n.x),y:toNumberPropValue(t.y??n.y),z:toNumberPropValue(t.z??n.z)}}))("transform-scale",e.scale,{x:1,y:1,z:1})),void 0!==e.rotate&&(t.rotate=toDimensionalSizePropValue("transform-rotate",e.rotate,{x:0,y:0,z:0},r)),void 0!==e.move&&(t.move=toDimensionalSizePropValue("transform-move",e.move,{x:0,y:0,z:0},"px")),void 0!==e.skew&&(t.skew=(e=>({$$type:"transform-skew",value:{x:toSizePropValue(e.x??0,r),y:toSizePropValue(e.y??0,r)}}))(e.skew)),{$$type:"keyframe-stop-settings",value:t}},toKeyframeStopPropValue=e=>{return"object"==typeof(t=e)&&null!==t&&"stop"in t&&"value"in t&&!("$$type"in t)?{$$type:"keyframe-stop",value:{stop:toSizePropValue(e.stop),settings:toKeyframeStopSettingsPropValue(e.value)}}:e;var t},toCustomEffectPropValue=e=>{var t,n;if(void 0!==e)return"object"==typeof(n=e)&&null!==n&&"keyframes"in n&&Array.isArray(n.keyframes)&&!("$$type"in n)?{$$type:"custom-effect",value:{keyframes:(t=e.keyframes,{$$type:"keyframes",value:t.map(toKeyframeStopPropValue)})}}:e}},"./packages/packages/core/editor-interactions/src/utils/filter-interactions.ts":function(e,t,n){n.r(t),n.d(t,{filterInteractions:function(){return filterInteractions}});var r=n("./packages/packages/core/editor-interactions/src/utils/is-supported-interaction-item.ts");const filterInteractions=e=>e.filter(e=>(0,r.isSupportedInteractionItem)(e))},"./packages/packages/core/editor-interactions/src/utils/get-interactions-config.ts":function(e,t,n){function getInteractionsConfig(){return window.ElementorInteractionsConfig??{}}n.r(t),n.d(t,{getInteractionsConfig:function(){return getInteractionsConfig}})},"./packages/packages/core/editor-interactions/src/utils/is-supported-interaction-item.ts":function(e,t,n){n.r(t),n.d(t,{isSupportedInteractionItem:function(){return isSupportedInteractionItem}});var r=n("./packages/packages/core/editor-interactions/src/interactions-controls-registry.ts"),o=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts");function isSupportedInteractionItem(e){const t=e.value;if(!0===(0,o.extractBoolean)(t.animation.value.config?.value.replay))return hasSupport("replay","yes");return[["trigger",(0,o.extractString)(t.trigger)],["easing",(0,o.extractString)(t.animation.value.config?.value.easing)],["effect",(0,o.extractString)(t.animation.value.effect)]].every(([e,t])=>""===t||null===t||hasSupport(e,t))}function hasSupport(e,t){const n=(0,r.getInteractionsControlOptions)(e);return 1>n.length||n.includes(t)}},"./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts":function(e,t,n){n.r(t),n.d(t,{buildDisplayLabel:function(){return buildDisplayLabel},createAnimationPreset:function(){return createAnimationPreset},createBoolean:function(){return createBoolean},createConfig:function(){return createConfig},createDefaultInteractionItem:function(){return createDefaultInteractionItem},createDefaultInteractions:function(){return createDefaultInteractions},createExcludedBreakpoints:function(){return createExcludedBreakpoints},createInteractionBreakpoints:function(){return createInteractionBreakpoints},createInteractionItem:function(){return createInteractionItem},createNumber:function(){return createNumber},createString:function(){return createString},createTimingConfig:function(){return createTimingConfig},extractBoolean:function(){return extractBoolean},extractExcludedBreakpoints:function(){return extractExcludedBreakpoints},extractSize:function(){return extractSize},extractString:function(){return extractString}});var r=n("@elementor/editor-props"),o=n("./packages/packages/core/editor-interactions/src/configs/time-constants.ts"),i=n("./packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts"),a=n("./packages/packages/core/editor-interactions/src/utils/custom-effect-to-prop-value.ts"),c=n("./packages/packages/core/editor-interactions/src/utils/get-interactions-config.ts"),s=n("./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts");const createString=e=>({$$type:"string",value:e}),createNumber=e=>({$$type:"number",value:e}),createTimingConfig=(e,t)=>({$$type:"timing-config",value:{duration:r.sizePropTypeUtil.create((0,i.parseSizeValue)(e,o.TIME_UNITS,void 0,o.DEFAULT_TIME_UNIT)),delay:r.sizePropTypeUtil.create((0,i.parseSizeValue)(t,o.TIME_UNITS,void 0,o.DEFAULT_TIME_UNIT))}}),createBoolean=e=>({$$type:"boolean",value:e}),createConfig=({replay:e,easing:t="easeIn",relativeTo:n="viewport",repeat:r="",times:o=1,start:i=85,end:a=15})=>({$$type:"config",value:{replay:createBoolean(e),easing:createString(t),relativeTo:createString(n),repeat:createString(r),times:createNumber(o),start:createSize(i,"%"),end:createSize(a,"%")}}),createSize=(e,t,n)=>{if(e)return r.sizePropTypeUtil.create((0,i.parseSizeValue)(e,["%"],n,t))},extractBoolean=(e,t=!1)=>e?.value??t,createExcludedBreakpoints=e=>({$$type:"excluded-breakpoints",value:e.map(createString)}),createInteractionBreakpoints=e=>({$$type:"interaction-breakpoints",value:{excluded:createExcludedBreakpoints(e)}}),extractExcludedBreakpoints=e=>e?.value.excluded.value.map(e=>e.value)??[],createAnimationPreset=({effect:e,type:t,direction:n,duration:r,delay:o,replay:i=!1,easing:c="easeIn",relativeTo:s,repeat:l,times:u,start:p,end:m,customEffects:d})=>{const g=(0,a.toCustomEffectPropValue)(d);return{$$type:"animation-preset-props",value:{effect:createString(e),...void 0!==g&&{custom_effect:g},type:createString(t),direction:createString(n??""),timing_config:createTimingConfig(r,o),config:createConfig({replay:i,easing:c,relativeTo:s,repeat:l,times:u,start:p,end:m})}}},createInteractionItem=({trigger:e,effect:t,type:n,direction:r,duration:o,delay:i,interactionId:a,replay:c=!1,easing:s="easeIn",relativeTo:l,repeat:u,times:p,start:m,end:d,excludedBreakpoints:g,customEffects:f})=>({$$type:"interaction-item",value:{...a&&{interaction_id:createString(a)},trigger:createString(e??""),animation:createAnimationPreset({effect:t??"",type:n??"",direction:r,duration:o??0,delay:i??0,replay:c,easing:s,relativeTo:l,repeat:u,times:p,start:m,end:d,customEffects:f}),...g&&g.length>0&&{breakpoints:createInteractionBreakpoints(g)}}}),createDefaultInteractionItem=()=>{const{constants:e}=(0,c.getInteractionsConfig)();return createInteractionItem({trigger:"load",effect:"fade",type:"in",duration:e.defaultDuration,delay:e.defaultDelay,replay:!1,easing:e.defaultEasing,interactionId:(0,s.generateTempInteractionId)()})},createDefaultInteractions=()=>({version:1,items:[createDefaultInteractionItem()]}),extractString=(e,t="")=>e?.value??t,extractSize=(e,t)=>e?.value?(0,i.formatSizeValue)(e.value):t,l={load:"On page load",scrollIn:"Scroll into view",scrollOut:"Scroll out of view",scrollOn:"While scrolling"},capitalize=e=>e.charAt(0).toUpperCase()+e.slice(1),buildDisplayLabel=e=>{const t=extractString(e.trigger),n=extractString(e.animation.value.effect),r=extractString(e.animation.value.type);return`${l[t]||capitalize(t)}: ${capitalize(n)} ${"custom"===n?"":capitalize(r)}`}},"./packages/packages/core/editor-interactions/src/utils/resolve-direction.ts":function(e,t,n){n.r(t),n.d(t,{resolveDirection:function(){return resolveDirection}});const resolveDirection=(e,t,n,r,o)=>"slide"!==t||n?"slide"===o&&e?n||"top":e?n:r:"top"},"./packages/packages/core/editor-interactions/src/utils/scroll-interaction-event.ts":function(e,t,n){n.r(t),n.d(t,{SCROLL_INTERACTION_EVENT:function(){return o},dispatchScrollInteraction:function(){return dispatchScrollInteraction},extractScrollOverlayParams:function(){return extractScrollOverlayParams},syncGridOverlay:function(){return syncGridOverlay}});var r=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts");const o="elementor/interactions/scroll-change";function dispatchScrollInteraction(e){window.dispatchEvent(new CustomEvent(o,{detail:e}))}function extractScrollOverlayParams(e,t){return{trigger:(0,r.extractString)(e.trigger,t.trigger),start:(0,r.extractSize)(e.animation.value.config?.value.start,t.start),end:(0,r.extractSize)(e.animation.value.config?.value.end,t.end),relativeTo:(0,r.extractString)(e.animation.value.config?.value.relativeTo,t.relativeTo)}}function syncGridOverlay(e,t,n,r){dispatchScrollInteraction("scrollOn"===e?{start:t,end:n,relativeTo:r}:null)}},"./packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts":function(e,t,n){n.r(t),n.d(t,{formatSizeValue:function(){return formatSizeValue},parseSizeValue:function(){return parseSizeValue}});const r=/^(?:(-?\d*\.?\d+)([a-z%]+)|([a-z%]+))$/i,parseSizeValue=(e,t,n,r)=>{if("number"==typeof e)return{size:e,unit:r};const o=tryParse(e,t,r);if(o)return o;if(n){const e=tryParse(n,t,r);if(e)return e}return createSizeValue(null,r)},tryParse=(e,t,n)=>{if("number"==typeof e)return createSizeValue(e,n);const o=e&&e.match(r);if(!o)return e?{size:Number(e),unit:n}:null;const i=o[1]?parseFloat(o[1]):null,a=o[2]||o[3];return t.includes(a)?createSizeValue(i,a):null},formatSizeValue=({size:e,unit:t})=>`${e??""}${t}`,createSizeValue=(e,t)=>({size:e,unit:t})},"./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts":function(e,t,n){n.r(t),n.d(t,{generateTempInteractionId:function(){return generateTempInteractionId},isTempId:function(){return isTempId}});const r="temp-",o=/^temp-[a-z0-9]+$/i;function generateTempInteractionId(){return`${r}${Math.random().toString(36).substring(2,11)}`}function isTempId(e){return!!e&&o.test(e)}},"./packages/packages/core/editor-interactions/src/utils/tracking.ts":function(e,t,n){n.r(t),n.d(t,{trackInteractionCreated:function(){return trackInteractionCreated}});var r=n("@elementor/editor-elements"),o=n("@elementor/events"),i=n("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts");const a={load:"On page load",scrollIn:"Scroll into view",scrollOut:"Scroll out of view",scrollOn:"While scrolling",hover:"Hover",click:"Click"},capitalize=e=>e.charAt(0).toUpperCase()+e.slice(1),trackInteractionCreated=(e,t)=>{const{dispatchEvent:n,config:c}=(0,o.getMixpanel)();if(!c?.names?.interactions?.created)return;const s=(0,i.extractString)(t.value.trigger),l=(0,i.extractString)(t.value.animation.value.effect),u=(0,i.extractString)(t.value.animation.value.type);n?.(c.names.interactions.created,{app_type:c?.appTypes?.editor,window_name:c?.appTypes?.editor,interaction_type:c?.triggers?.click,target_name:(0,r.getElementLabel)(e),interaction_result:"interaction_created",target_location:c?.locations?.widgetPanel,location_l1:(0,r.getElementLabel)(e),location_l2:"interactions",interaction_description:"interaction_created",interaction_trigger:a[s]??capitalize(s),interaction_effect:"custom"===l?capitalize(l):`${capitalize(l)} ${capitalize(u)}`})}},"@elementor/editor-controls":function(e){e.exports=window.elementorV2.editorControls},"@elementor/editor-elements":function(e){e.exports=window.elementorV2.editorElements},"@elementor/editor-mcp":function(e){e.exports=window.elementorV2.editorMcp},"@elementor/editor-props":function(e){e.exports=window.elementorV2.editorProps},"@elementor/editor-responsive":function(e){e.exports=window.elementorV2.editorResponsive},"@elementor/editor-ui":function(e){e.exports=window.elementorV2.editorUi},"@elementor/editor-v1-adapters":function(e){e.exports=window.elementorV2.editorV1Adapters},"@elementor/events":function(e){e.exports=window.elementorV2.events},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/schema":function(e){e.exports=window.elementorV2.schema},"@elementor/session":function(e){e.exports=window.elementorV2.session},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@elementor/utils":function(e){e.exports=window.elementorV2.utils},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}__webpack_require__.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=function(e,t){for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};!function(){__webpack_require__.r(n),__webpack_require__.d(n,{BASE_EASINGS:function(){return u.BASE_EASINGS},BASE_EFFECTS:function(){return m.BASE_EFFECTS},BASE_REPLAY:function(){return p.BASE_REPLAY},BASE_TRIGGERS:function(){return l.BASE_TRIGGERS},DEFAULT_VALUES:function(){return g.DEFAULT_VALUES},EASING_OPTIONS:function(){return u.EASING_OPTIONS},EFFECT_OPTIONS:function(){return m.EFFECT_OPTIONS},ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX:function(){return a.ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX},EmptyState:function(){return e.EmptyState},InteractionsTab:function(){return t.InteractionsTab},REPEAT_OPTIONS:function(){return d.REPEAT_OPTIONS},REPEAT_TOOLTIPS:function(){return d.REPEAT_TOOLTIPS},REPLAY_OPTIONS:function(){return p.REPLAY_OPTIONS},SCROLL_INTERACTION_EVENT:function(){return E.SCROLL_INTERACTION_EVENT},TRIGGER_OPTIONS:function(){return l.TRIGGER_OPTIONS},buildDisplayLabel:function(){return f.buildDisplayLabel},createAnimationPreset:function(){return f.createAnimationPreset},createBoolean:function(){return f.createBoolean},createConfig:function(){return f.createConfig},createDefaultInteractionItem:function(){return f.createDefaultInteractionItem},createDefaultInteractions:function(){return f.createDefaultInteractions},createExcludedBreakpoints:function(){return f.createExcludedBreakpoints},createInteractionBreakpoints:function(){return f.createInteractionBreakpoints},createInteractionItem:function(){return f.createInteractionItem},createInteractionsProvider:function(){return i.createInteractionsProvider},createNumber:function(){return f.createNumber},createString:function(){return f.createString},createTimingConfig:function(){return f.createTimingConfig},dispatchScrollInteraction:function(){return E.dispatchScrollInteraction},extractBoolean:function(){return f.extractBoolean},extractExcludedBreakpoints:function(){return f.extractExcludedBreakpoints},extractScrollOverlayParams:function(){return E.extractScrollOverlayParams},extractSize:function(){return f.extractSize},extractString:function(){return f.extractString},formatSizeValue:function(){return k.formatSizeValue},generateTempInteractionId:function(){return _.generateTempInteractionId},getInteractionsConfig:function(){return r.getInteractionsConfig},init:function(){return c.init},interactionsRepository:function(){return o.interactionsRepository},isTempId:function(){return _.isTempId},parseSizeValue:function(){return k.parseSizeValue},registerInteractionsControl:function(){return s.registerInteractionsControl},resolveDirection:function(){return I.resolveDirection},syncGridOverlay:function(){return E.syncGridOverlay},useElementInteractions:function(){return v.useElementInteractions}});var e=__webpack_require__("./packages/packages/core/editor-interactions/src/components/empty-state.tsx"),t=__webpack_require__("./packages/packages/core/editor-interactions/src/components/interactions-tab.tsx"),r=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/get-interactions-config.ts"),o=__webpack_require__("./packages/packages/core/editor-interactions/src/interactions-repository.ts"),i=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/create-interactions-provider.ts"),a=__webpack_require__("./packages/packages/core/editor-interactions/src/providers/document-elements-interactions-provider.ts"),c=__webpack_require__("./packages/packages/core/editor-interactions/src/init.ts"),s=__webpack_require__("./packages/packages/core/editor-interactions/src/interactions-controls-registry.ts"),l=__webpack_require__("./packages/packages/core/editor-interactions/src/components/controls/trigger.tsx"),u=__webpack_require__("./packages/packages/core/editor-interactions/src/components/controls/easing.tsx"),p=__webpack_require__("./packages/packages/core/editor-interactions/src/components/controls/replay.tsx"),m=__webpack_require__("./packages/packages/core/editor-interactions/src/components/controls/effect.tsx"),d=__webpack_require__("./packages/packages/core/editor-interactions/src/components/controls/repeat.tsx"),g=__webpack_require__("./packages/packages/core/editor-interactions/src/components/interaction-details.tsx"),f=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts"),_=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts"),I=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/resolve-direction.ts"),k=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts"),v=__webpack_require__("./packages/packages/core/editor-interactions/src/hooks/use-element-interactions.ts"),E=__webpack_require__("./packages/packages/core/editor-interactions/src/utils/scroll-interaction-event.ts")}(),(window.elementorV2=window.elementorV2||{}).editorInteractions=n}(),window.elementorV2.editorInteractions?.init?.(); | |
| 1 | +(function(react, _elementor_icons, _elementor_ui, _wordpress_i18n, _elementor_session, _elementor_editor_elements, _elementor_editor_v1_adapters, _elementor_editor_props, _elementor_editor_controls, _elementor_events, _elementor_editor_responsive, _elementor_editor_mcp, _elementor_editor_ui, _elementor_utils, _elementor_schema) { | |
| 2 | + | |
| 3 | +//#region \0rolldown/runtime.js | |
| 4 | + var __create = Object.create; | |
| 5 | + var __defProp = Object.defineProperty; | |
| 6 | + var __name = (target, value) => __defProp(target, "name", { | |
| 7 | + value, | |
| 8 | + configurable: true | |
| 9 | + }); | |
| 10 | + var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | |
| 11 | + var __getOwnPropNames = Object.getOwnPropertyNames; | |
| 12 | + var __getProtoOf = Object.getPrototypeOf; | |
| 13 | + var __hasOwnProp = Object.prototype.hasOwnProperty; | |
| 14 | + var __exportAll = (all, no_symbols) => { | |
| 15 | + let target = {}; | |
| 16 | + for (var name in all) { | |
| 17 | + __defProp(target, name, { | |
| 18 | + get: all[name], | |
| 19 | + enumerable: true | |
| 20 | + }); | |
| 21 | + } | |
| 22 | + if (!no_symbols) { | |
| 23 | + __defProp(target, Symbol.toStringTag, { value: "Module" }); | |
| 24 | + } | |
| 25 | + return target; | |
| 26 | + }; | |
| 27 | + var __copyProps = (to, from, except, desc) => { | |
| 28 | + if (from && typeof from === "object" || typeof from === "function") { | |
| 29 | + for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) { | |
| 30 | + key = keys[i]; | |
| 31 | + if (!__hasOwnProp.call(to, key) && key !== except) { | |
| 32 | + __defProp(to, key, { | |
| 33 | + get: ((k) => from[k]).bind(null, key), | |
| 34 | + enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable | |
| 35 | + }); | |
| 36 | + } | |
| 37 | + } | |
| 38 | + } | |
| 39 | + return to; | |
| 40 | + }; | |
| 41 | + var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { | |
| 42 | + value: mod, | |
| 43 | + enumerable: true | |
| 44 | + }) : target, mod)); | |
| 45 | + | |
| 46 | +//#endregion | |
| 47 | +react = __toESM(react); | |
| 48 | + | |
| 49 | +//#region packages/packages/core/editor-interactions/src/components/empty-state.tsx | |
| 50 | + var EmptyState = ({ onCreateInteraction }) => { | |
| 51 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 52 | + alignItems: "center", | |
| 53 | + justifyContent: "center", | |
| 54 | + height: "100%", | |
| 55 | + color: "text.secondary", | |
| 56 | + sx: { | |
| 57 | + p: 2.5, | |
| 58 | + pt: 8, | |
| 59 | + pb: 5.5 | |
| 60 | + }, | |
| 61 | + gap: 1.5 | |
| 62 | + }, /* @__PURE__ */ react.createElement(_elementor_icons.SwipeIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 63 | + align: "center", | |
| 64 | + variant: "subtitle2" | |
| 65 | + }, (0, _wordpress_i18n.__)("Animate elements with Interactions", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 66 | + align: "center", | |
| 67 | + variant: "caption", | |
| 68 | + maxWidth: "170px" | |
| 69 | + }, (0, _wordpress_i18n.__)("Add entrance animations and effects triggered by user interactions such as page load or scroll.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Button, { | |
| 70 | + variant: "outlined", | |
| 71 | + color: "secondary", | |
| 72 | + size: "small", | |
| 73 | + sx: { mt: 1 }, | |
| 74 | + onClick: onCreateInteraction | |
| 75 | + }, (0, _wordpress_i18n.__)("Create an interaction", "elementor"))); | |
| 76 | + }; | |
| 77 | + | |
| 78 | +//#endregion | |
| 79 | +//#region packages/packages/core/editor-interactions/src/interactions-controls-registry.ts | |
| 80 | + var controlsRegistry = /* @__PURE__ */ new Map(); | |
| 81 | + function registerInteractionsControl({ type, component, options }) { | |
| 82 | + controlsRegistry.set(type, { | |
| 83 | + type, | |
| 84 | + component, | |
| 85 | + options | |
| 86 | + }); | |
| 87 | + } | |
| 88 | + function getInteractionsControl(type) { | |
| 89 | + return controlsRegistry.get(type); | |
| 90 | + } | |
| 91 | + function getInteractionsControlOptions(type) { | |
| 92 | + return controlsRegistry.get(type)?.options ?? []; | |
| 93 | + } | |
| 94 | + | |
| 95 | +//#endregion | |
| 96 | +//#region packages/packages/core/editor-interactions/src/configs/time-constants.ts | |
| 97 | + var TIME_UNITS = ["s", "ms"]; | |
| 98 | + | |
| 99 | +//#endregion | |
| 100 | +//#region packages/packages/core/editor-interactions/src/utils/size-transform-utils.ts | |
| 101 | + var SIZE_REGEX = /^(?:(-?\d*\.?\d+)([a-z%]+)|([a-z%]+))$/i; | |
| 102 | + var parseSizeValue = (value, allowedUnits, defaultValue, defaultUnit) => { | |
| 103 | + if (typeof value === "number") return { | |
| 104 | + size: value, | |
| 105 | + unit: defaultUnit | |
| 106 | + }; | |
| 107 | + const sizeValue = tryParse(value, allowedUnits, defaultUnit); | |
| 108 | + if (sizeValue) return sizeValue; | |
| 109 | + if (defaultValue) { | |
| 110 | + const fallbackSize = tryParse(defaultValue, allowedUnits, defaultUnit); | |
| 111 | + if (fallbackSize) return fallbackSize; | |
| 112 | + } | |
| 113 | + return createSizeValue(null, defaultUnit); | |
| 114 | + }; | |
| 115 | + var tryParse = (value, allowedUnits, defaultUnit) => { | |
| 116 | + if (typeof value === "number") return createSizeValue(value, defaultUnit); | |
| 117 | + const match = value && value.match(SIZE_REGEX); | |
| 118 | + if (!match) { | |
| 119 | + if (value) return { | |
| 120 | + size: Number(value), | |
| 121 | + unit: defaultUnit | |
| 122 | + }; | |
| 123 | + return null; | |
| 124 | + } | |
| 125 | + const size = match[1] ? parseFloat(match[1]) : null; | |
| 126 | + const unit = match[2] || match[3]; | |
| 127 | + if (!allowedUnits.includes(unit)) return null; | |
| 128 | + return createSizeValue(size, unit); | |
| 129 | + }; | |
| 130 | + var formatSizeValue = ({ size, unit }) => { | |
| 131 | + return `${size ?? ""}${unit}`; | |
| 132 | + }; | |
| 133 | + var createSizeValue = (size, unit) => { | |
| 134 | + return { | |
| 135 | + size, | |
| 136 | + unit | |
| 137 | + }; | |
| 138 | + }; | |
| 139 | + | |
| 140 | +//#endregion | |
| 141 | +//#region packages/packages/core/editor-interactions/src/utils/custom-effect-to-prop-value.ts | |
| 142 | + var CUSTOM_EFFECT_TYPE = "custom-effect"; | |
| 143 | + var KEYFRAMES_TYPE = "keyframes"; | |
| 144 | + var KEYFRAME_STOP_TYPE = "keyframe-stop"; | |
| 145 | + var KEYFRAME_STOP_SETTINGS_TYPE = "keyframe-stop-settings"; | |
| 146 | + var SIZE_TYPE = "size"; | |
| 147 | + var NUMBER_TYPE = "number"; | |
| 148 | + var TRANSFORM_SCALE_TYPE = "transform-scale"; | |
| 149 | + var TRANSFORM_ROTATE_TYPE = "transform-rotate"; | |
| 150 | + var TRANSFORM_MOVE_TYPE = "transform-move"; | |
| 151 | + var TRANSFORM_SKEW_TYPE = "transform-skew"; | |
| 152 | + var UNIT_PERCENT = "%"; | |
| 153 | + var UNIT_DEG = "deg"; | |
| 154 | + var UNIT_PX = "px"; | |
| 155 | + var isPlainCustomEffect = (v) => typeof v === "object" && v !== null && "keyframes" in v && Array.isArray(v.keyframes) && !("$$type" in v); | |
| 156 | + var toSizePropValue = (size, unit = UNIT_PERCENT) => ({ | |
| 157 | + $$type: SIZE_TYPE, | |
| 158 | + value: { | |
| 159 | + size, | |
| 160 | + unit | |
| 161 | + } | |
| 162 | + }); | |
| 163 | + var toNumberPropValue = (n) => ({ | |
| 164 | + $$type: NUMBER_TYPE, | |
| 165 | + value: n | |
| 166 | + }); | |
| 167 | + var toDimensionalNumberPropValue = (type, plain, defaults) => ({ | |
| 168 | + $$type: type, | |
| 169 | + value: { | |
| 170 | + x: toNumberPropValue(plain.x ?? defaults.x), | |
| 171 | + y: toNumberPropValue(plain.y ?? defaults.y), | |
| 172 | + z: toNumberPropValue(plain.z ?? defaults.z) | |
| 173 | + } | |
| 174 | + }); | |
| 175 | + var toDimensionalSizePropValue = (type, plain, defaults, unit) => ({ | |
| 176 | + $$type: type, | |
| 177 | + value: { | |
| 178 | + x: toSizePropValue(plain.x ?? defaults.x, unit), | |
| 179 | + y: toSizePropValue(plain.y ?? defaults.y, unit), | |
| 180 | + z: toSizePropValue(plain.z ?? defaults.z, unit) | |
| 181 | + } | |
| 182 | + }); | |
| 183 | + var toSkewPropValue = (plain) => ({ | |
| 184 | + $$type: TRANSFORM_SKEW_TYPE, | |
| 185 | + value: { | |
| 186 | + x: toSizePropValue(plain.x ?? 0, UNIT_DEG), | |
| 187 | + y: toSizePropValue(plain.y ?? 0, UNIT_DEG) | |
| 188 | + } | |
| 189 | + }); | |
| 190 | + var toKeyframeStopSettingsPropValue = (plain) => { | |
| 191 | + const value = {}; | |
| 192 | + if (plain.opacity !== void 0) { | |
| 193 | + const percent = plain.opacity <= 1 ? Math.round(plain.opacity * 100) : plain.opacity; | |
| 194 | + value.opacity = toSizePropValue(percent); | |
| 195 | + } | |
| 196 | + if (plain.scale !== void 0) value.scale = toDimensionalNumberPropValue(TRANSFORM_SCALE_TYPE, plain.scale, { | |
| 197 | + x: 1, | |
| 198 | + y: 1, | |
| 199 | + z: 1 | |
| 200 | + }); | |
| 201 | + if (plain.rotate !== void 0) value.rotate = toDimensionalSizePropValue(TRANSFORM_ROTATE_TYPE, plain.rotate, { | |
| 202 | + x: 0, | |
| 203 | + y: 0, | |
| 204 | + z: 0 | |
| 205 | + }, UNIT_DEG); | |
| 206 | + if (plain.move !== void 0) value.move = toDimensionalSizePropValue(TRANSFORM_MOVE_TYPE, plain.move, { | |
| 207 | + x: 0, | |
| 208 | + y: 0, | |
| 209 | + z: 0 | |
| 210 | + }, UNIT_PX); | |
| 211 | + if (plain.skew !== void 0) value.skew = toSkewPropValue(plain.skew); | |
| 212 | + return { | |
| 213 | + $$type: KEYFRAME_STOP_SETTINGS_TYPE, | |
| 214 | + value | |
| 215 | + }; | |
| 216 | + }; | |
| 217 | + var isPlainKeyframe = (v) => typeof v === "object" && v !== null && "stop" in v && "value" in v && !("$$type" in v); | |
| 218 | + var toKeyframeStopPropValue = (item) => { | |
| 219 | + if (!isPlainKeyframe(item)) return item; | |
| 220 | + return { | |
| 221 | + $$type: KEYFRAME_STOP_TYPE, | |
| 222 | + value: { | |
| 223 | + stop: toSizePropValue(item.stop), | |
| 224 | + settings: toKeyframeStopSettingsPropValue(item.value) | |
| 225 | + } | |
| 226 | + }; | |
| 227 | + }; | |
| 228 | + var toKeyframesPropValue = (keyframes) => ({ | |
| 229 | + $$type: KEYFRAMES_TYPE, | |
| 230 | + value: keyframes.map(toKeyframeStopPropValue) | |
| 231 | + }); | |
| 232 | + var plainCustomEffectToPropValue = (plain) => ({ | |
| 233 | + $$type: CUSTOM_EFFECT_TYPE, | |
| 234 | + value: { keyframes: toKeyframesPropValue(plain.keyframes) } | |
| 235 | + }); | |
| 236 | + var toCustomEffectPropValue = (customEffects) => { | |
| 237 | + if (customEffects === void 0) return; | |
| 238 | + if (isPlainCustomEffect(customEffects)) return plainCustomEffectToPropValue(customEffects); | |
| 239 | + return customEffects; | |
| 240 | + }; | |
| 241 | + | |
| 242 | +//#endregion | |
| 243 | +//#region packages/packages/core/editor-interactions/src/utils/get-interactions-config.ts | |
| 244 | + function getInteractionsConfig() { | |
| 245 | + return window.ElementorInteractionsConfig ?? {}; | |
| 246 | + } | |
| 247 | + | |
| 248 | +//#endregion | |
| 249 | +//#region packages/packages/core/editor-interactions/src/utils/temp-id-utils.ts | |
| 250 | + var TEMP_ID_PREFIX = "temp-"; | |
| 251 | + var TEMP_ID_REGEX = /^temp-[a-z0-9]+$/i; | |
| 252 | + function generateTempInteractionId() { | |
| 253 | + return `${TEMP_ID_PREFIX}${Math.random().toString(36).substring(2, 11)}`; | |
| 254 | + } | |
| 255 | + function isTempId(id) { | |
| 256 | + return !!id && TEMP_ID_REGEX.test(id); | |
| 257 | + } | |
| 258 | + | |
| 259 | +//#endregion | |
| 260 | +//#region packages/packages/core/editor-interactions/src/utils/prop-value-utils.ts | |
| 261 | + var createString = (value) => ({ | |
| 262 | + $$type: "string", | |
| 263 | + value | |
| 264 | + }); | |
| 265 | + var createNumber = (value) => ({ | |
| 266 | + $$type: "number", | |
| 267 | + value | |
| 268 | + }); | |
| 269 | + var createTimingConfig = (duration, delay) => ({ | |
| 270 | + $$type: "timing-config", | |
| 271 | + value: { | |
| 272 | + duration: _elementor_editor_props.sizePropTypeUtil.create(parseSizeValue(duration, TIME_UNITS, void 0, "ms")), | |
| 273 | + delay: _elementor_editor_props.sizePropTypeUtil.create(parseSizeValue(delay, TIME_UNITS, void 0, "ms")) | |
| 274 | + } | |
| 275 | + }); | |
| 276 | + var createBoolean = (value) => ({ | |
| 277 | + $$type: "boolean", | |
| 278 | + value | |
| 279 | + }); | |
| 280 | + var createConfig = ({ replay, easing = "easeIn", relativeTo = "viewport", repeat = "", times = 1, start = 85, end = 15 }) => ({ | |
| 281 | + $$type: "config", | |
| 282 | + value: { | |
| 283 | + replay: createBoolean(replay), | |
| 284 | + easing: createString(easing), | |
| 285 | + relativeTo: createString(relativeTo), | |
| 286 | + repeat: createString(repeat), | |
| 287 | + times: createNumber(times), | |
| 288 | + start: createSize(start, "%"), | |
| 289 | + end: createSize(end, "%") | |
| 290 | + } | |
| 291 | + }); | |
| 292 | + var createSize = (value, defaultUnit, defaultValue) => { | |
| 293 | + if (!value) return; | |
| 294 | + return _elementor_editor_props.sizePropTypeUtil.create(parseSizeValue(value, ["%"], defaultValue, defaultUnit)); | |
| 295 | + }; | |
| 296 | + var extractBoolean = (prop, fallback = false) => { | |
| 297 | + return prop?.value ?? fallback; | |
| 298 | + }; | |
| 299 | + var createExcludedBreakpoints = (breakpoints) => ({ | |
| 300 | + $$type: "excluded-breakpoints", | |
| 301 | + value: breakpoints.map(createString) | |
| 302 | + }); | |
| 303 | + var createInteractionBreakpoints = (excluded) => ({ | |
| 304 | + $$type: "interaction-breakpoints", | |
| 305 | + value: { excluded: createExcludedBreakpoints(excluded) } | |
| 306 | + }); | |
| 307 | + var extractExcludedBreakpoints = (breakpoints) => { | |
| 308 | + return breakpoints?.value.excluded.value.map((bp) => bp.value) ?? []; | |
| 309 | + }; | |
| 310 | + var createAnimationPreset = ({ effect, type, direction, duration, delay, replay = false, easing = "easeIn", relativeTo, repeat, times, start, end, customEffects }) => { | |
| 311 | + const customEffectProp = toCustomEffectPropValue(customEffects); | |
| 312 | + return { | |
| 313 | + $$type: "animation-preset-props", | |
| 314 | + value: { | |
| 315 | + effect: createString(effect), | |
| 316 | + ...customEffectProp !== void 0 && { custom_effect: customEffectProp }, | |
| 317 | + type: createString(type), | |
| 318 | + direction: createString(direction ?? ""), | |
| 319 | + timing_config: createTimingConfig(duration, delay), | |
| 320 | + config: createConfig({ | |
| 321 | + replay, | |
| 322 | + easing, | |
| 323 | + relativeTo, | |
| 324 | + repeat, | |
| 325 | + times, | |
| 326 | + start, | |
| 327 | + end | |
| 328 | + }) | |
| 329 | + } | |
| 330 | + }; | |
| 331 | + }; | |
| 332 | + var createInteractionItem = ({ trigger, effect, type, direction, duration, delay, interactionId, replay = false, easing = "easeIn", relativeTo, repeat, times, start, end, excludedBreakpoints, customEffects }) => ({ | |
| 333 | + $$type: "interaction-item", | |
| 334 | + value: { | |
| 335 | + ...interactionId && { interaction_id: createString(interactionId) }, | |
| 336 | + trigger: createString(trigger ?? ""), | |
| 337 | + animation: createAnimationPreset({ | |
| 338 | + effect: effect ?? "", | |
| 339 | + type: type ?? "", | |
| 340 | + direction, | |
| 341 | + duration: duration ?? 0, | |
| 342 | + delay: delay ?? 0, | |
| 343 | + replay, | |
| 344 | + easing, | |
| 345 | + relativeTo, | |
| 346 | + repeat, | |
| 347 | + times, | |
| 348 | + start, | |
| 349 | + end, | |
| 350 | + customEffects | |
| 351 | + }), | |
| 352 | + ...excludedBreakpoints && excludedBreakpoints.length > 0 && { breakpoints: createInteractionBreakpoints(excludedBreakpoints) } | |
| 353 | + } | |
| 354 | + }); | |
| 355 | + var createDefaultInteractionItem = () => { | |
| 356 | + const { constants } = getInteractionsConfig(); | |
| 357 | + return createInteractionItem({ | |
| 358 | + trigger: "load", | |
| 359 | + effect: "fade", | |
| 360 | + type: "in", | |
| 361 | + duration: constants.defaultDuration, | |
| 362 | + delay: constants.defaultDelay, | |
| 363 | + replay: false, | |
| 364 | + easing: constants.defaultEasing, | |
| 365 | + interactionId: generateTempInteractionId() | |
| 366 | + }); | |
| 367 | + }; | |
| 368 | + var createDefaultInteractions = () => ({ | |
| 369 | + version: 1, | |
| 370 | + items: [createDefaultInteractionItem()] | |
| 371 | + }); | |
| 372 | + var extractString = (prop, fallback = "") => { | |
| 373 | + return prop?.value ?? fallback; | |
| 374 | + }; | |
| 375 | + var extractSize = (prop, defaultValue) => { | |
| 376 | + if (!prop?.value) return defaultValue; | |
| 377 | + return formatSizeValue(prop.value); | |
| 378 | + }; | |
| 379 | + var TRIGGER_LABELS$1 = { | |
| 380 | + load: "On page load", | |
| 381 | + scrollIn: "Scroll into view", | |
| 382 | + scrollOut: "Scroll out of view", | |
| 383 | + scrollOn: "While scrolling" | |
| 384 | + }; | |
| 385 | + var capitalize$1 = /* @__PURE__ */ __name((str) => { | |
| 386 | + return str.charAt(0).toUpperCase() + str.slice(1); | |
| 387 | + }, "capitalize"); | |
| 388 | + var buildDisplayLabel = (item) => { | |
| 389 | + const trigger = extractString(item.trigger); | |
| 390 | + const effect = extractString(item.animation.value.effect); | |
| 391 | + const type = extractString(item.animation.value.type); | |
| 392 | + return `${TRIGGER_LABELS$1[trigger] || capitalize$1(trigger)}: ${capitalize$1(effect)} ${"custom" === effect ? "" : capitalize$1(type)}`; | |
| 393 | + }; | |
| 394 | + | |
| 395 | +//#endregion | |
| 396 | +//#region packages/packages/core/editor-interactions/src/utils/is-supported-interaction-item.ts | |
| 397 | + function isSupportedInteractionItem(interaction) { | |
| 398 | + const value = interaction.value; | |
| 399 | + if (true === extractBoolean(value.animation.value.config?.value.replay)) return hasSupport("replay", "yes"); | |
| 400 | + const trigger = extractString(value.trigger); | |
| 401 | + const easing = extractString(value.animation.value.config?.value.easing); | |
| 402 | + const effect = extractString(value.animation.value.effect); | |
| 403 | + return [ | |
| 404 | + ["trigger", trigger], | |
| 405 | + ["easing", easing], | |
| 406 | + ["effect", effect] | |
| 407 | + ].every(([controlType, controlValue]) => { | |
| 408 | + if (controlValue === "" || controlValue === null) return true; | |
| 409 | + return hasSupport(controlType, controlValue); | |
| 410 | + }); | |
| 411 | + } | |
| 412 | + function hasSupport(controlType, controlValue) { | |
| 413 | + const supportedOptions = getInteractionsControlOptions(controlType); | |
| 414 | + if (1 > supportedOptions.length) return true; | |
| 415 | + return supportedOptions.includes(controlValue); | |
| 416 | + } | |
| 417 | + | |
| 418 | +//#endregion | |
| 419 | +//#region packages/packages/core/editor-interactions/src/utils/filter-interactions.ts | |
| 420 | + var filterInteractions = (interactions) => { | |
| 421 | + return interactions.filter((interaction) => { | |
| 422 | + return isSupportedInteractionItem(interaction); | |
| 423 | + }); | |
| 424 | + }; | |
| 425 | + | |
| 426 | +//#endregion | |
| 427 | +//#region packages/packages/core/editor-interactions/src/hooks/use-element-interactions.ts | |
| 428 | + var useElementInteractions = (elementId) => { | |
| 429 | + const [interactions, setInteractions] = (0, react.useState)(() => { | |
| 430 | + const initial = (0, _elementor_editor_elements.getElementInteractions)(elementId); | |
| 431 | + const filteredInteractions = filterInteractions(initial?.items ?? []); | |
| 432 | + return { | |
| 433 | + version: initial?.version ?? 1, | |
| 434 | + items: filteredInteractions | |
| 435 | + }; | |
| 436 | + }); | |
| 437 | + (0, _elementor_editor_v1_adapters.__privateUseListenTo)((0, _elementor_editor_v1_adapters.windowEvent)("elementor/element/update_interactions"), () => { | |
| 438 | + const newInteractions = (0, _elementor_editor_elements.getElementInteractions)(elementId); | |
| 439 | + const filteredInteractions = filterInteractions(newInteractions?.items ?? []); | |
| 440 | + setInteractions({ | |
| 441 | + version: newInteractions?.version ?? 1, | |
| 442 | + items: filteredInteractions | |
| 443 | + }); | |
| 444 | + }, [elementId]); | |
| 445 | + return interactions; | |
| 446 | + }; | |
| 447 | + | |
| 448 | +//#endregion | |
| 449 | +//#region packages/packages/core/editor-interactions/src/contexts/interactions-context.tsx | |
| 450 | + var InteractionsContext = (0, react.createContext)(null); | |
| 451 | + var DEFAULT_INTERACTIONS = { | |
| 452 | + version: 1, | |
| 453 | + items: [] | |
| 454 | + }; | |
| 455 | + var InteractionsProvider = ({ children, elementId }) => { | |
| 456 | + const rawInteractions = useElementInteractions(elementId); | |
| 457 | + (0, react.useEffect)(() => { | |
| 458 | + window.dispatchEvent(new CustomEvent("elementor/element/update_interactions")); | |
| 459 | + }, []); | |
| 460 | + const interactions = rawInteractions ?? DEFAULT_INTERACTIONS; | |
| 461 | + const undoableSetInteractions = (0, react.useMemo)(() => (0, _elementor_editor_v1_adapters.undoable)({ | |
| 462 | + do: ({ interactions: newInteractions }) => { | |
| 463 | + const previous = (0, _elementor_editor_elements.getElementInteractions)(elementId); | |
| 464 | + (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 465 | + elementId, | |
| 466 | + interactions: newInteractions | |
| 467 | + }); | |
| 468 | + return previous; | |
| 469 | + }, | |
| 470 | + undo: (_, previous) => { | |
| 471 | + (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 472 | + elementId, | |
| 473 | + interactions: previous?.items?.length ? previous : void 0 | |
| 474 | + }); | |
| 475 | + } | |
| 476 | + }, { | |
| 477 | + title: (0, _elementor_editor_elements.getElementLabel)(elementId), | |
| 478 | + subtitle: ({ operationType }) => operationType === "apply" ? (0, _wordpress_i18n.__)("Interaction Applied", "elementor") : (0, _wordpress_i18n.__)("Interaction Deleted", "elementor") | |
| 479 | + }), [elementId]); | |
| 480 | + const setInteractions = (value) => { | |
| 481 | + const normalizedValue = value && value.items?.length === 0 ? void 0 : value; | |
| 482 | + const prevItemCount = interactions.items?.length ?? 0; | |
| 483 | + const newItemCount = normalizedValue?.items?.length ?? 0; | |
| 484 | + if (newItemCount > prevItemCount) undoableSetInteractions({ | |
| 485 | + interactions: normalizedValue, | |
| 486 | + operationType: "apply" | |
| 487 | + }); | |
| 488 | + else if (newItemCount < prevItemCount) undoableSetInteractions({ | |
| 489 | + interactions: normalizedValue, | |
| 490 | + operationType: "delete" | |
| 491 | + }); | |
| 492 | + else (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 493 | + elementId, | |
| 494 | + interactions: normalizedValue | |
| 495 | + }); | |
| 496 | + }; | |
| 497 | + const playInteractions = (interactionId) => { | |
| 498 | + (0, _elementor_editor_elements.playElementInteractions)(elementId, interactionId); | |
| 499 | + }; | |
| 500 | + const contextValue = { | |
| 501 | + elementId, | |
| 502 | + interactions, | |
| 503 | + setInteractions, | |
| 504 | + playInteractions | |
| 505 | + }; | |
| 506 | + return /* @__PURE__ */ react.createElement(InteractionsContext.Provider, { value: contextValue }, children); | |
| 507 | + }; | |
| 508 | + var useInteractionsContext = () => { | |
| 509 | + const context = (0, react.useContext)(InteractionsContext); | |
| 510 | + if (!context) throw new Error("useInteractionsContext must be used within InteractionsProvider"); | |
| 511 | + return context; | |
| 512 | + }; | |
| 513 | + | |
| 514 | +//#endregion | |
| 515 | +//#region packages/packages/core/editor-interactions/src/contexts/popup-state-context.tsx | |
| 516 | + var PopupStateContext = (0, react.createContext)(void 0); | |
| 517 | + var PopupStateProvider = ({ children }) => { | |
| 518 | + const [openByDefault, setOpenByDefault] = (0, react.useState)(false); | |
| 519 | + const triggerDefaultOpen = (0, react.useCallback)(() => { | |
| 520 | + setOpenByDefault(true); | |
| 521 | + }, []); | |
| 522 | + const resetDefaultOpen = (0, react.useCallback)(() => { | |
| 523 | + setOpenByDefault(false); | |
| 524 | + }, []); | |
| 525 | + return /* @__PURE__ */ react.createElement(PopupStateContext.Provider, { value: { | |
| 526 | + openByDefault, | |
| 527 | + triggerDefaultOpen, | |
| 528 | + resetDefaultOpen | |
| 529 | + } }, children); | |
| 530 | + }; | |
| 531 | + | |
| 532 | +//#endregion | |
| 533 | +//#region packages/packages/core/editor-interactions/src/contexts/interactions-item-context.tsx | |
| 534 | + var InteractionItemContext = (0, react.createContext)(null); | |
| 535 | + function InteractionItemContextProvider({ value, children }) { | |
| 536 | + return /* @__PURE__ */ react.createElement(InteractionItemContext.Provider, { value }, children); | |
| 537 | + } | |
| 538 | + function useInteractionItemContext() { | |
| 539 | + const context = (0, react.useContext)(InteractionItemContext); | |
| 540 | + if (!context) throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider"); | |
| 541 | + return context; | |
| 542 | + } | |
| 543 | + | |
| 544 | +//#endregion | |
| 545 | +//#region packages/packages/core/editor-interactions/src/utils/scroll-interaction-event.ts | |
| 546 | + var SCROLL_INTERACTION_EVENT = "elementor/interactions/scroll-change"; | |
| 547 | + function dispatchScrollInteraction(data) { | |
| 548 | + window.dispatchEvent(new CustomEvent(SCROLL_INTERACTION_EVENT, { detail: data })); | |
| 549 | + } | |
| 550 | + function extractScrollOverlayParams(interaction, defaults) { | |
| 551 | + return { | |
| 552 | + trigger: extractString(interaction.trigger, defaults.trigger), | |
| 553 | + start: extractSize(interaction.animation.value.config?.value.start, defaults.start), | |
| 554 | + end: extractSize(interaction.animation.value.config?.value.end, defaults.end), | |
| 555 | + relativeTo: extractString(interaction.animation.value.config?.value.relativeTo, defaults.relativeTo) | |
| 556 | + }; | |
| 557 | + } | |
| 558 | + function syncGridOverlay(trigger, start, end, relativeTo) { | |
| 559 | + if (trigger === "scrollOn") dispatchScrollInteraction({ | |
| 560 | + start, | |
| 561 | + end, | |
| 562 | + relativeTo | |
| 563 | + }); | |
| 564 | + else dispatchScrollInteraction(null); | |
| 565 | + } | |
| 566 | + | |
| 567 | +//#endregion | |
| 568 | +//#region packages/packages/core/editor-interactions/src/utils/tracking.ts | |
| 569 | + var TRIGGER_LABELS = { | |
| 570 | + load: "On page load", | |
| 571 | + scrollIn: "Scroll into view", | |
| 572 | + scrollOut: "Scroll out of view", | |
| 573 | + scrollOn: "While scrolling", | |
| 574 | + hover: "Hover", | |
| 575 | + click: "Click" | |
| 576 | + }; | |
| 577 | + var capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1); | |
| 578 | + var trackInteractionCreated = (elementId, item) => { | |
| 579 | + const { dispatchEvent, config } = (0, _elementor_events.getMixpanel)(); | |
| 580 | + if (!config?.names?.interactions?.created) return; | |
| 581 | + const trigger = extractString(item.value.trigger); | |
| 582 | + const effect = extractString(item.value.animation.value.effect); | |
| 583 | + const type = extractString(item.value.animation.value.type); | |
| 584 | + dispatchEvent?.(config.names.interactions.created, { | |
| 585 | + window_name: config?.appTypes?.editor, | |
| 586 | + interaction_type: config?.triggers?.click, | |
| 587 | + target_name: (0, _elementor_editor_elements.getElementLabel)(elementId), | |
| 588 | + interaction_result: "interaction_created", | |
| 589 | + target_location: config?.locations?.widgetPanel, | |
| 590 | + location_l1: (0, _elementor_editor_elements.getElementLabel)(elementId), | |
| 591 | + location_l2: "interactions", | |
| 592 | + interaction_description: "interaction_created", | |
| 593 | + interaction_trigger: TRIGGER_LABELS[trigger] ?? capitalize(trigger), | |
| 594 | + interaction_effect: effect === "custom" ? capitalize(effect) : `${capitalize(effect)} ${capitalize(type)}` | |
| 595 | + }); | |
| 596 | + }; | |
| 597 | + | |
| 598 | +//#endregion | |
| 599 | +//#region packages/packages/core/editor-interactions/src/utils/resolve-direction.ts | |
| 600 | + var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => { | |
| 601 | + if (newEffect === "slide" && !newDirection) return "top"; | |
| 602 | + if (currentEffect === "slide" && hasDirection) return newDirection || "top"; | |
| 603 | + if (hasDirection) return newDirection; | |
| 604 | + return currentDirection; | |
| 605 | + }; | |
| 606 | + | |
| 607 | +//#endregion | |
| 608 | +//#region packages/packages/core/editor-interactions/src/components/controls/time-frame-indicator.tsx | |
| 609 | + function TimeFrameIndicator({ value, onChange, defaultValue }) { | |
| 610 | + const sizeValue = parseSizeValue(value, TIME_UNITS, defaultValue, "ms"); | |
| 611 | + const handleChange = (0, react.useCallback)((size) => { | |
| 612 | + onChange(formatSizeValue(size)); | |
| 613 | + }, [onChange]); | |
| 614 | + const handleBlur = (event) => { | |
| 615 | + if (!event.target.value) handleChange(parseSizeValue(defaultValue, TIME_UNITS, void 0, "ms")); | |
| 616 | + }; | |
| 617 | + return /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeComponent, { | |
| 618 | + units: TIME_UNITS, | |
| 619 | + value: sizeValue, | |
| 620 | + setValue: handleChange, | |
| 621 | + onBlur: handleBlur, | |
| 622 | + InputProps: { inputProps: { min: 0 } } | |
| 623 | + }); | |
| 624 | + } | |
| 625 | + | |
| 626 | +//#endregion | |
| 627 | +//#region packages/packages/core/editor-interactions/src/components/field.tsx | |
| 628 | + var Field = ({ label, children }) => { | |
| 629 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 630 | + item: true, | |
| 631 | + xs: 12, | |
| 632 | + "aria-label": `${label} control` | |
| 633 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PopoverGridContainer, null, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 634 | + item: true, | |
| 635 | + xs: 6 | |
| 636 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 637 | + item: true, | |
| 638 | + xs: 6 | |
| 639 | + }, children))); | |
| 640 | + }; | |
| 641 | + | |
| 642 | +//#endregion | |
| 643 | +//#region packages/packages/core/editor-interactions/src/components/interaction-details.tsx | |
| 644 | + var DEFAULT_VALUES = { | |
| 645 | + trigger: "load", | |
| 646 | + effect: "fade", | |
| 647 | + type: "in", | |
| 648 | + direction: "", | |
| 649 | + duration: 600, | |
| 650 | + delay: 0, | |
| 651 | + replay: false, | |
| 652 | + easing: "easeIn", | |
| 653 | + relativeTo: "viewport", | |
| 654 | + repeat: "", | |
| 655 | + times: 1, | |
| 656 | + start: 85, | |
| 657 | + end: 15 | |
| 658 | + }; | |
| 659 | + var TRIGGERS_WITHOUT_REPLAY = [ | |
| 660 | + "load", | |
| 661 | + "scrollOn", | |
| 662 | + "hover", | |
| 663 | + "click" | |
| 664 | + ]; | |
| 665 | + var controlVisibilityConfig = { | |
| 666 | + replay: (values) => !TRIGGERS_WITHOUT_REPLAY.includes(values.trigger), | |
| 667 | + custom: (values) => values.effect === "custom", | |
| 668 | + effectType: (values) => values.effect !== "custom", | |
| 669 | + direction: (values) => values.effect !== "custom", | |
| 670 | + relativeTo: (values) => values.trigger === "scrollOn", | |
| 671 | + start: (values) => values.trigger === "scrollOn", | |
| 672 | + end: (values) => values.trigger === "scrollOn", | |
| 673 | + repeat: (values) => values.trigger !== "scrollOn", | |
| 674 | + times: (values) => values.trigger !== "scrollOn" && values.repeat === "times", | |
| 675 | + duration: (values) => { | |
| 676 | + return !(values.trigger === "scrollOn"); | |
| 677 | + }, | |
| 678 | + delay: (values) => { | |
| 679 | + return !(values.trigger === "scrollOn"); | |
| 680 | + } | |
| 681 | + }; | |
| 682 | + function normalizeTimesValue(value, fallback) { | |
| 683 | + const numericValue = Number(value); | |
| 684 | + if (!Number.isFinite(numericValue)) return fallback; | |
| 685 | + return Math.max(1, Math.floor(numericValue)); | |
| 686 | + } | |
| 687 | + function useControlComponent(controlName, isVisible = true) { | |
| 688 | + return (0, react.useMemo)(() => { | |
| 689 | + if (!isVisible) return null; | |
| 690 | + return getInteractionsControl(controlName)?.component ?? null; | |
| 691 | + }, [controlName, isVisible]); | |
| 692 | + } | |
| 693 | + var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => { | |
| 694 | + const trigger = extractString(interaction.trigger, DEFAULT_VALUES.trigger); | |
| 695 | + const effect = extractString(interaction.animation.value.effect, DEFAULT_VALUES.effect); | |
| 696 | + const customEffects = interaction.animation.value.custom_effect; | |
| 697 | + const type = extractString(interaction.animation.value.type, DEFAULT_VALUES.type); | |
| 698 | + const direction = extractString(interaction.animation.value.direction, DEFAULT_VALUES.direction); | |
| 699 | + const duration = extractSize(interaction.animation.value.timing_config.value.duration); | |
| 700 | + const delay = extractSize(interaction.animation.value.timing_config.value.delay); | |
| 701 | + const replay = extractBoolean(interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay); | |
| 702 | + const easing = extractString(interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing); | |
| 703 | + const relativeTo = extractString(interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo); | |
| 704 | + const configValue = interaction.animation.value.config?.value; | |
| 705 | + const repeat = extractString(configValue?.repeat, DEFAULT_VALUES.repeat); | |
| 706 | + const times = normalizeTimesValue(configValue?.times?.value, DEFAULT_VALUES.times); | |
| 707 | + const start = extractSize(interaction.animation.value.config?.value.start, DEFAULT_VALUES.start); | |
| 708 | + const end = extractSize(interaction.animation.value.config?.value.end, DEFAULT_VALUES.end); | |
| 709 | + const interactionValues = { | |
| 710 | + trigger, | |
| 711 | + effect, | |
| 712 | + type, | |
| 713 | + direction, | |
| 714 | + duration, | |
| 715 | + delay, | |
| 716 | + easing, | |
| 717 | + replay, | |
| 718 | + relativeTo, | |
| 719 | + repeat, | |
| 720 | + times, | |
| 721 | + start, | |
| 722 | + end, | |
| 723 | + customEffects | |
| 724 | + }; | |
| 725 | + const TriggerControl = useControlComponent("trigger", true); | |
| 726 | + const EffectControl = useControlComponent("effect"); | |
| 727 | + const ReplayControl = useControlComponent("replay", controlVisibilityConfig.replay(interactionValues)); | |
| 728 | + const RelativeToControl = useControlComponent("relativeTo", controlVisibilityConfig.relativeTo(interactionValues)); | |
| 729 | + const StartControl = useControlComponent("start", controlVisibilityConfig.start(interactionValues)); | |
| 730 | + const EndControl = useControlComponent("end", controlVisibilityConfig.end(interactionValues)); | |
| 731 | + const CustomEffectControl = useControlComponent("customEffects", controlVisibilityConfig.custom(interactionValues)); | |
| 732 | + const EffectTypeControl = useControlComponent("effectType", controlVisibilityConfig.effectType(interactionValues)); | |
| 733 | + const DirectionControl = useControlComponent("direction", controlVisibilityConfig.direction(interactionValues)); | |
| 734 | + const RepeatControl = useControlComponent("repeat", controlVisibilityConfig.repeat(interactionValues)); | |
| 735 | + const TimesControl = useControlComponent("times", controlVisibilityConfig.times(interactionValues)); | |
| 736 | + const EasingControl = useControlComponent("easing"); | |
| 737 | + const updateInteraction = (updates) => { | |
| 738 | + const resolvedDirectionValue = resolveDirection("direction" in updates, updates.effect, updates.direction, direction, effect); | |
| 739 | + const updatedInteraction = { | |
| 740 | + ...interaction, | |
| 741 | + interaction_id: interaction.interaction_id, | |
| 742 | + trigger: createString(updates.trigger ?? trigger), | |
| 743 | + animation: createAnimationPreset({ | |
| 744 | + effect: updates.effect ?? effect, | |
| 745 | + type: updates.type ?? type, | |
| 746 | + direction: resolvedDirectionValue, | |
| 747 | + duration: updates.duration ?? duration, | |
| 748 | + delay: updates.delay ?? delay, | |
| 749 | + replay: updates.replay ?? replay, | |
| 750 | + easing: updates.easing ?? easing, | |
| 751 | + relativeTo: updates.relativeTo ?? relativeTo, | |
| 752 | + repeat: updates.repeat ?? repeat, | |
| 753 | + times: updates.times ?? times, | |
| 754 | + start: updates.start ?? start, | |
| 755 | + end: updates.end ?? end, | |
| 756 | + customEffects: updates.customEffects ?? customEffects | |
| 757 | + }) | |
| 758 | + }; | |
| 759 | + onChange(updatedInteraction); | |
| 760 | + syncGridOverlay(updates.trigger ?? trigger, updates.start ?? start, updates.end ?? end, updates.relativeTo ?? relativeTo); | |
| 761 | + const interactionId = extractString(updatedInteraction.interaction_id); | |
| 762 | + setTimeout(() => { | |
| 763 | + onPlayInteraction(interactionId); | |
| 764 | + }, 0); | |
| 765 | + }; | |
| 766 | + return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PopoverContent, { p: 1.5 }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 767 | + container: true, | |
| 768 | + spacing: 1.5 | |
| 769 | + }, TriggerControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Trigger", "elementor") }, /* @__PURE__ */ react.createElement(TriggerControl, { | |
| 770 | + value: trigger, | |
| 771 | + onChange: (v) => updateInteraction({ trigger: v }) | |
| 772 | + })), ReplayControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Replay", "elementor") }, /* @__PURE__ */ react.createElement(ReplayControl, { | |
| 773 | + value: replay, | |
| 774 | + onChange: (v) => updateInteraction({ replay: v }), | |
| 775 | + disabled: true | |
| 776 | + }))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 777 | + container: true, | |
| 778 | + spacing: 1.5 | |
| 779 | + }, EffectControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Effect", "elementor") }, /* @__PURE__ */ react.createElement(EffectControl, { | |
| 780 | + value: effect, | |
| 781 | + onChange: (v) => updateInteraction({ effect: v }) | |
| 782 | + })), CustomEffectControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Custom Effect", "elementor") }, /* @__PURE__ */ react.createElement(CustomEffectControl, { | |
| 783 | + value: customEffects, | |
| 784 | + onChange: (v) => updateInteraction({ customEffects: v }) | |
| 785 | + })), EffectTypeControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Type", "elementor") }, /* @__PURE__ */ react.createElement(EffectTypeControl, { | |
| 786 | + value: type, | |
| 787 | + onChange: (v) => updateInteraction({ type: v }) | |
| 788 | + })), DirectionControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Direction", "elementor") }, /* @__PURE__ */ react.createElement(DirectionControl, { | |
| 789 | + value: direction, | |
| 790 | + onChange: (v) => updateInteraction({ direction: v }), | |
| 791 | + interactionType: type | |
| 792 | + })), RepeatControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Repeat", "elementor") }, /* @__PURE__ */ react.createElement(RepeatControl, { | |
| 793 | + value: repeat, | |
| 794 | + onChange: (v) => updateInteraction({ repeat: v }) | |
| 795 | + })), TimesControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Times", "elementor") }, /* @__PURE__ */ react.createElement(TimesControl, { | |
| 796 | + value: times, | |
| 797 | + onChange: (v) => updateInteraction({ times: normalizeTimesValue(v, DEFAULT_VALUES.times) }) | |
| 798 | + })), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Duration", "elementor") }, /* @__PURE__ */ react.createElement(TimeFrameIndicator, { | |
| 799 | + value: String(duration), | |
| 800 | + onChange: (v) => updateInteraction({ duration: v }), | |
| 801 | + defaultValue: DEFAULT_VALUES.duration | |
| 802 | + })), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Delay", "elementor") }, /* @__PURE__ */ react.createElement(TimeFrameIndicator, { | |
| 803 | + value: String(delay), | |
| 804 | + onChange: (v) => updateInteraction({ delay: v }), | |
| 805 | + defaultValue: DEFAULT_VALUES.delay | |
| 806 | + }))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 807 | + container: true, | |
| 808 | + spacing: 1.5 | |
| 809 | + }, StartControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Start", "elementor") }, /* @__PURE__ */ react.createElement(StartControl, { | |
| 810 | + value: parseSizeValue(start, ["%"]).size?.toString() ?? "", | |
| 811 | + onChange: (v) => updateInteraction({ start: v }) | |
| 812 | + })), EndControl && /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("End", "elementor") }, /* @__PURE__ */ react.createElement(EndControl, { | |
| 813 | + value: parseSizeValue(end, ["%"]).size?.toString() ?? "", | |
| 814 | + onChange: (v) => updateInteraction({ end: v }) | |
| 815 | + })), /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Relative To", "elementor") }, /* @__PURE__ */ react.createElement(RelativeToControl, { | |
| 816 | + value: relativeTo, | |
| 817 | + onChange: (v) => updateInteraction({ relativeTo: v }) | |
| 818 | + }))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)), EasingControl && /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 819 | + container: true, | |
| 820 | + spacing: 1.5 | |
| 821 | + }, /* @__PURE__ */ react.createElement(Field, { label: (0, _wordpress_i18n.__)("Easing", "elementor") }, /* @__PURE__ */ react.createElement(EasingControl, { | |
| 822 | + value: easing, | |
| 823 | + onChange: (v) => { | |
| 824 | + updateInteraction({ easing: v }); | |
| 825 | + } | |
| 826 | + })))); | |
| 827 | + }; | |
| 828 | + | |
| 829 | +//#endregion | |
| 830 | +//#region packages/packages/core/editor-interactions/src/components/interaction-settings.tsx | |
| 831 | + var SIZE = "tiny"; | |
| 832 | + var InteractionSettings = ({ interaction, onChange }) => { | |
| 833 | + const breakpoints = (0, _elementor_editor_responsive.useBreakpoints)(); | |
| 834 | + const availableBreakpoints = (0, react.useMemo)(() => breakpoints.map((breakpoint) => ({ | |
| 835 | + label: breakpoint.label, | |
| 836 | + value: String(breakpoint.id) | |
| 837 | + })), [breakpoints]); | |
| 838 | + const [selectedBreakpoints, setSelectedBreakpoints] = (0, react.useState)(() => { | |
| 839 | + const excluded = extractExcludedBreakpoints(interaction.breakpoints).filter((excludedBreakpoint) => { | |
| 840 | + return availableBreakpoints.some(({ value }) => value === excludedBreakpoint); | |
| 841 | + }); | |
| 842 | + return availableBreakpoints.filter(({ value }) => { | |
| 843 | + return !excluded.includes(value); | |
| 844 | + }); | |
| 845 | + }); | |
| 846 | + const handleBreakpointChange = (0, react.useCallback)((_, newValue) => { | |
| 847 | + setSelectedBreakpoints(newValue); | |
| 848 | + const selectedValues = newValue.map((option) => option.value); | |
| 849 | + const newExcluded = availableBreakpoints.filter((breakpoint) => !selectedValues.includes(breakpoint.value)).map((breakpoint) => breakpoint.value); | |
| 850 | + const updatedInteraction = { | |
| 851 | + ...interaction, | |
| 852 | + ...newExcluded.length > 0 && { breakpoints: createInteractionBreakpoints(newExcluded) } | |
| 853 | + }; | |
| 854 | + if (newExcluded.length === 0) delete updatedInteraction.breakpoints; | |
| 855 | + onChange(updatedInteraction); | |
| 856 | + }, [ | |
| 857 | + interaction, | |
| 858 | + availableBreakpoints, | |
| 859 | + onChange | |
| 860 | + ]); | |
| 861 | + return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PopoverContent, { p: 1.5 }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 862 | + container: true, | |
| 863 | + spacing: 1.5 | |
| 864 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 865 | + item: true, | |
| 866 | + xs: 12 | |
| 867 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 868 | + direction: "column", | |
| 869 | + gap: 1 | |
| 870 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, { sx: { width: "100%" } }, (0, _wordpress_i18n.__)("Trigger on", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Autocomplete, { | |
| 871 | + fullWidth: true, | |
| 872 | + multiple: true, | |
| 873 | + value: selectedBreakpoints, | |
| 874 | + onChange: handleBreakpointChange, | |
| 875 | + size: SIZE, | |
| 876 | + options: availableBreakpoints, | |
| 877 | + isOptionEqualToValue: (option, value) => option.value === value.value, | |
| 878 | + renderInput: (params) => /* @__PURE__ */ react.createElement(_elementor_ui.TextField, { ...params }), | |
| 879 | + renderTags: (values, getTagProps) => values.map((option, index) => { | |
| 880 | + const { key, ...chipProps } = getTagProps({ index }); | |
| 881 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 882 | + key, | |
| 883 | + size: SIZE, | |
| 884 | + label: option.label, | |
| 885 | + ...chipProps | |
| 886 | + }); | |
| 887 | + }) | |
| 888 | + }))))); | |
| 889 | + }; | |
| 890 | + | |
| 891 | +//#endregion | |
| 892 | +//#region packages/packages/core/editor-interactions/src/components/interactions-list-item.tsx | |
| 893 | + var InteractionsListItem = ({ index, value: interaction }) => { | |
| 894 | + const { getTabsProps, getTabProps, getTabPanelProps } = (0, _elementor_ui.useTabs)("details"); | |
| 895 | + const context = useInteractionItemContext(); | |
| 896 | + const handleChange = (0, react.useCallback)((newInteractionValue) => { | |
| 897 | + context?.onInteractionChange(index, newInteractionValue); | |
| 898 | + }, [context, index]); | |
| 899 | + const handlePlayInteraction = (0, react.useCallback)((interactionId2) => { | |
| 900 | + context?.onPlayInteraction(interactionId2); | |
| 901 | + }, [context]); | |
| 902 | + const interactionId = extractString(interaction.value.interaction_id); | |
| 903 | + return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Tabs, { | |
| 904 | + size: "small", | |
| 905 | + variant: "fullWidth", | |
| 906 | + "aria-label": (0, _wordpress_i18n.__)("Interaction", "elementor"), | |
| 907 | + ...getTabsProps() | |
| 908 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 909 | + label: (0, _wordpress_i18n.__)("Details", "elementor"), | |
| 910 | + ...getTabProps("details") | |
| 911 | + }), /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 912 | + label: (0, _wordpress_i18n.__)("Settings", "elementor"), | |
| 913 | + ...getTabProps("settings") | |
| 914 | + })), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 915 | + sx: { p: 0 }, | |
| 916 | + ...getTabPanelProps("details") | |
| 917 | + }, /* @__PURE__ */ react.createElement(InteractionDetails, { | |
| 918 | + key: interactionId, | |
| 919 | + interaction: interaction.value, | |
| 920 | + onChange: handleChange, | |
| 921 | + onPlayInteraction: handlePlayInteraction | |
| 922 | + })), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 923 | + sx: { p: 0 }, | |
| 924 | + ...getTabPanelProps("settings") | |
| 925 | + }, /* @__PURE__ */ react.createElement(InteractionSettings, { | |
| 926 | + key: interactionId, | |
| 927 | + interaction: interaction.value, | |
| 928 | + onChange: handleChange | |
| 929 | + }))); | |
| 930 | + }; | |
| 931 | + | |
| 932 | +//#endregion | |
| 933 | +//#region packages/packages/core/editor-interactions/src/components/interactions-list.tsx | |
| 934 | + var MAX_NUMBER_OF_INTERACTIONS = 5; | |
| 935 | + function InteractionsList(props) { | |
| 936 | + const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props; | |
| 937 | + const { elementId } = useInteractionsContext(); | |
| 938 | + const hasInitializedRef = (0, react.useRef)(false); | |
| 939 | + const newlyCreatedIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set()); | |
| 940 | + const handleUpdateInteractions = (0, react.useCallback)((newInteractions) => { | |
| 941 | + onSelectInteractions(newInteractions); | |
| 942 | + }, [onSelectInteractions]); | |
| 943 | + (0, react.useEffect)(() => { | |
| 944 | + if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) { | |
| 945 | + hasInitializedRef.current = true; | |
| 946 | + const newItem = createDefaultInteractionItem(); | |
| 947 | + newlyCreatedIdsRef.current.add(extractString(newItem.value.interaction_id)); | |
| 948 | + handleUpdateInteractions({ | |
| 949 | + version: 1, | |
| 950 | + items: [newItem] | |
| 951 | + }); | |
| 952 | + } | |
| 953 | + }, [ | |
| 954 | + triggerCreateOnShowEmpty, | |
| 955 | + interactions.items, | |
| 956 | + handleUpdateInteractions | |
| 957 | + ]); | |
| 958 | + const isMaxNumberOfInteractionsReached = (0, react.useMemo)(() => { | |
| 959 | + return interactions.items?.length >= 5; | |
| 960 | + }, [interactions.items?.length]); | |
| 961 | + const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ react.createElement(_elementor_ui.Alert, { | |
| 962 | + color: "secondary", | |
| 963 | + icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, null), | |
| 964 | + size: "small" | |
| 965 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, (0, _wordpress_i18n.__)("Interactions", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { component: "span" }, (0, _wordpress_i18n.__)("You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.", "elementor"))) : void 0; | |
| 966 | + const handleRepeaterChange = (0, react.useCallback)((newItems, _, meta) => { | |
| 967 | + handleUpdateInteractions({ | |
| 968 | + ...interactions, | |
| 969 | + items: newItems | |
| 970 | + }); | |
| 971 | + if (meta?.action?.type === "add") { | |
| 972 | + const addedItem = meta.action.payload[0]?.item; | |
| 973 | + if (addedItem) newlyCreatedIdsRef.current.add(extractString(addedItem.value.interaction_id)); | |
| 974 | + } | |
| 975 | + }, [interactions, handleUpdateInteractions]); | |
| 976 | + const handleInteractionChange = (0, react.useCallback)((index, newInteractionValue) => { | |
| 977 | + const newItems = structuredClone(interactions.items); | |
| 978 | + newItems[index] = { | |
| 979 | + $$type: "interaction-item", | |
| 980 | + value: newInteractionValue | |
| 981 | + }; | |
| 982 | + handleUpdateInteractions({ | |
| 983 | + ...interactions, | |
| 984 | + items: newItems | |
| 985 | + }); | |
| 986 | + }, [interactions, handleUpdateInteractions]); | |
| 987 | + const contextValue = (0, react.useMemo)(() => ({ | |
| 988 | + onInteractionChange: handleInteractionChange, | |
| 989 | + onPlayInteraction | |
| 990 | + }), [handleInteractionChange, onPlayInteraction]); | |
| 991 | + return /* @__PURE__ */ react.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, { | |
| 992 | + openOnAdd: true, | |
| 993 | + openItem: triggerCreateOnShowEmpty ? 0 : void 0, | |
| 994 | + label: (0, _wordpress_i18n.__)("Interactions", "elementor"), | |
| 995 | + values: interactions.items, | |
| 996 | + setValues: handleRepeaterChange, | |
| 997 | + showDuplicate: false, | |
| 998 | + showToggle: false, | |
| 999 | + isSortable: false, | |
| 1000 | + disableAddItemButton: isMaxNumberOfInteractionsReached, | |
| 1001 | + addButtonInfotipContent: infotipContent, | |
| 1002 | + itemSettings: { | |
| 1003 | + initialValues: createDefaultInteractionItem(), | |
| 1004 | + Label: ({ value }) => buildDisplayLabel(value.value), | |
| 1005 | + Icon: () => null, | |
| 1006 | + Content: InteractionsListItem, | |
| 1007 | + onPopoverOpen: (value) => { | |
| 1008 | + const { trigger, start, end, relativeTo } = extractScrollOverlayParams(value.value, DEFAULT_VALUES); | |
| 1009 | + syncGridOverlay(trigger, start, end, relativeTo); | |
| 1010 | + }, | |
| 1011 | + onPopoverClose: (value) => { | |
| 1012 | + dispatchScrollInteraction(null); | |
| 1013 | + const id = extractString(value.value.interaction_id); | |
| 1014 | + if (newlyCreatedIdsRef.current.has(id)) { | |
| 1015 | + newlyCreatedIdsRef.current.delete(id); | |
| 1016 | + trackInteractionCreated(elementId, value); | |
| 1017 | + } | |
| 1018 | + }, | |
| 1019 | + actions: (value) => /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 1020 | + key: "preview", | |
| 1021 | + placement: "top", | |
| 1022 | + title: (0, _wordpress_i18n.__)("Preview", "elementor") | |
| 1023 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 1024 | + "aria-label": (0, _wordpress_i18n.__)("Play interaction", "elementor"), | |
| 1025 | + size: "tiny", | |
| 1026 | + onClick: () => onPlayInteraction(extractString(value.value.interaction_id)) | |
| 1027 | + }, /* @__PURE__ */ react.createElement(_elementor_icons.PlayerPlayIcon, { fontSize: "tiny" }))) | |
| 1028 | + } | |
| 1029 | + })); | |
| 1030 | + } | |
| 1031 | + | |
| 1032 | +//#endregion | |
| 1033 | +//#region packages/packages/core/editor-interactions/src/components/interactions-tab.tsx | |
| 1034 | + var InteractionsTab = ({ elementId }) => { | |
| 1035 | + return /* @__PURE__ */ react.createElement(PopupStateProvider, null, /* @__PURE__ */ react.createElement(InteractionsTabContent, { elementId })); | |
| 1036 | + }; | |
| 1037 | + function InteractionsTabContent({ elementId }) { | |
| 1038 | + const existingInteractions = useElementInteractions(elementId); | |
| 1039 | + const firstInteractionState = (0, react.useState)(false); | |
| 1040 | + const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0]; | |
| 1041 | + return /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ react.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ react.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ react.createElement(EmptyState, { onCreateInteraction: () => { | |
| 1042 | + firstInteractionState[1](true); | |
| 1043 | + } })); | |
| 1044 | + } | |
| 1045 | + function InteractionsContent({ firstInteractionState }) { | |
| 1046 | + const { interactions, setInteractions, playInteractions } = useInteractionsContext(); | |
| 1047 | + const applyInteraction = (0, react.useCallback)((newInteractions) => { | |
| 1048 | + firstInteractionState[1](false); | |
| 1049 | + if (!newInteractions) { | |
| 1050 | + setInteractions(void 0); | |
| 1051 | + return; | |
| 1052 | + } | |
| 1053 | + setInteractions(newInteractions); | |
| 1054 | + }, [setInteractions, firstInteractionState]); | |
| 1055 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1056 | + sx: { | |
| 1057 | + m: 1, | |
| 1058 | + p: 1.5 | |
| 1059 | + }, | |
| 1060 | + gap: 2 | |
| 1061 | + }, /* @__PURE__ */ react.createElement(InteractionsList, { | |
| 1062 | + triggerCreateOnShowEmpty: firstInteractionState[0], | |
| 1063 | + interactions, | |
| 1064 | + onSelectInteractions: applyInteraction, | |
| 1065 | + onPlayInteraction: playInteractions | |
| 1066 | + })); | |
| 1067 | + } | |
| 1068 | + | |
| 1069 | +//#endregion | |
| 1070 | +//#region packages/packages/core/editor-interactions/src/utils/create-interactions-repository.ts | |
| 1071 | + var createInteractionsRepository = () => { | |
| 1072 | + const providers = []; | |
| 1073 | + const getProviders = () => { | |
| 1074 | + return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1); | |
| 1075 | + }; | |
| 1076 | + const register = (provider) => { | |
| 1077 | + providers.push(provider); | |
| 1078 | + }; | |
| 1079 | + const all = () => { | |
| 1080 | + return getProviders().flatMap((provider) => provider.actions.all()); | |
| 1081 | + }; | |
| 1082 | + const subscribe = (cb) => { | |
| 1083 | + const unsubscribes = providers.map((provider) => provider.subscribe(cb)); | |
| 1084 | + return () => { | |
| 1085 | + unsubscribes.forEach((unsubscribe) => unsubscribe()); | |
| 1086 | + }; | |
| 1087 | + }; | |
| 1088 | + const getProviderByKey = (key) => { | |
| 1089 | + return providers.find((provider) => { | |
| 1090 | + try { | |
| 1091 | + return provider.getKey() === key; | |
| 1092 | + } catch { | |
| 1093 | + return false; | |
| 1094 | + } | |
| 1095 | + }); | |
| 1096 | + }; | |
| 1097 | + return { | |
| 1098 | + all, | |
| 1099 | + register, | |
| 1100 | + subscribe, | |
| 1101 | + getProviders, | |
| 1102 | + getProviderByKey | |
| 1103 | + }; | |
| 1104 | + }; | |
| 1105 | + | |
| 1106 | +//#endregion | |
| 1107 | +//#region packages/packages/core/editor-interactions/src/interactions-repository.ts | |
| 1108 | + var interactionsRepository = createInteractionsRepository(); | |
| 1109 | + | |
| 1110 | +//#endregion | |
| 1111 | +//#region packages/packages/core/editor-interactions/src/utils/create-interactions-provider.ts | |
| 1112 | + var DEFAULT_PRIORITY = 10; | |
| 1113 | + function createInteractionsProvider({ key, priority = DEFAULT_PRIORITY, subscribe = () => () => {}, actions }) { | |
| 1114 | + return { | |
| 1115 | + getKey: typeof key === "string" ? () => key : key, | |
| 1116 | + priority, | |
| 1117 | + subscribe, | |
| 1118 | + actions: { all: actions.all } | |
| 1119 | + }; | |
| 1120 | + } | |
| 1121 | + | |
| 1122 | +//#endregion | |
| 1123 | +//#region packages/packages/core/editor-interactions/src/providers/document-elements-interactions-provider.ts | |
| 1124 | + var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-"; | |
| 1125 | + var documentElementsInteractionsProvider = createInteractionsProvider({ | |
| 1126 | + key: () => { | |
| 1127 | + const documentId = (0, _elementor_editor_elements.getCurrentDocumentId)(); | |
| 1128 | + if (!documentId) return `${ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX}pending`; | |
| 1129 | + return `${ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX}${documentId}`; | |
| 1130 | + }, | |
| 1131 | + priority: 50, | |
| 1132 | + subscribe: (cb) => { | |
| 1133 | + return (0, _elementor_editor_v1_adapters.__privateListenTo)([(0, _elementor_editor_v1_adapters.windowEvent)("elementor/element/update_interactions")], () => cb()); | |
| 1134 | + }, | |
| 1135 | + actions: { all: () => { | |
| 1136 | + return (0, _elementor_editor_elements.getElements)().filter((element) => { | |
| 1137 | + const interactions = (0, _elementor_editor_elements.getElementInteractions)(element.id); | |
| 1138 | + if (!interactions) return false; | |
| 1139 | + return interactions?.items?.length > 0; | |
| 1140 | + }).map((element) => { | |
| 1141 | + const interactions = (0, _elementor_editor_elements.getElementInteractions)(element.id); | |
| 1142 | + return { | |
| 1143 | + elementId: element.id, | |
| 1144 | + dataId: element.id, | |
| 1145 | + interactions: interactions || { | |
| 1146 | + version: 1, | |
| 1147 | + items: [] | |
| 1148 | + } | |
| 1149 | + }; | |
| 1150 | + }); | |
| 1151 | + } } | |
| 1152 | + }); | |
| 1153 | + | |
| 1154 | +//#endregion | |
| 1155 | +//#region packages/packages/core/editor-interactions/src/commands/get-clipboard-elements.ts | |
| 1156 | + function getClipboardElements(storageKey = "clipboard") { | |
| 1157 | + try { | |
| 1158 | + return JSON.parse(localStorage.getItem("elementor") ?? "{}")[storageKey]?.elements; | |
| 1159 | + } catch { | |
| 1160 | + return; | |
| 1161 | + } | |
| 1162 | + } | |
| 1163 | + | |
| 1164 | +//#endregion | |
| 1165 | +//#region packages/packages/core/editor-interactions/src/commands/paste-interactions.ts | |
| 1166 | + function isAtomicContainer(container) { | |
| 1167 | + const type = container?.model.get("widgetType") || container?.model.get("elType"); | |
| 1168 | + const elementConfig = (0, _elementor_editor_elements.getWidgetsCache)()?.[type]; | |
| 1169 | + return Boolean(elementConfig?.atomic_props_schema); | |
| 1170 | + } | |
| 1171 | + function getTitleForContainers(containers) { | |
| 1172 | + return containers.length > 1 ? (0, _wordpress_i18n.__)("Elements", "elementor") : (0, _elementor_editor_elements.getElementLabel)(containers[0].id); | |
| 1173 | + } | |
| 1174 | + function normalizeClipboardInteractions(raw) { | |
| 1175 | + if (!raw) return null; | |
| 1176 | + const parsed = typeof raw === "string" ? JSON.parse(raw) : raw; | |
| 1177 | + const payload = { | |
| 1178 | + version: parsed?.version ?? 1, | |
| 1179 | + items: parsed?.items?.filter((item) => isSupportedInteractionItem(item)) ?? [] | |
| 1180 | + }; | |
| 1181 | + if (!payload.items.length) return null; | |
| 1182 | + return payload; | |
| 1183 | + } | |
| 1184 | + function regenerateInteractionIds(interactions) { | |
| 1185 | + const cloned = structuredClone(interactions); | |
| 1186 | + cloned.items?.forEach((item) => { | |
| 1187 | + if (item.$$type === "interaction-item" && item.value) item.value.interaction_id = createString(generateTempInteractionId()); | |
| 1188 | + }); | |
| 1189 | + return cloned; | |
| 1190 | + } | |
| 1191 | + function initPasteInteractionsCommand() { | |
| 1192 | + const undoablePasteInteractions = (0, _elementor_editor_v1_adapters.undoable)({ | |
| 1193 | + do: ({ containers, newInteractions }) => { | |
| 1194 | + const pasted = regenerateInteractionIds(newInteractions); | |
| 1195 | + return containers.map((container) => { | |
| 1196 | + const elementId = container.id; | |
| 1197 | + const previous = (0, _elementor_editor_elements.getElementInteractions)(elementId); | |
| 1198 | + (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 1199 | + elementId, | |
| 1200 | + interactions: pasted | |
| 1201 | + }); | |
| 1202 | + return { | |
| 1203 | + elementId, | |
| 1204 | + previous: previous ?? { | |
| 1205 | + version: 1, | |
| 1206 | + items: [] | |
| 1207 | + } | |
| 1208 | + }; | |
| 1209 | + }); | |
| 1210 | + }, | |
| 1211 | + undo: (_, revertData) => { | |
| 1212 | + revertData.forEach(({ elementId, previous }) => { | |
| 1213 | + (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 1214 | + elementId, | |
| 1215 | + interactions: previous.items?.length ? previous : void 0 | |
| 1216 | + }); | |
| 1217 | + }); | |
| 1218 | + } | |
| 1219 | + }, { | |
| 1220 | + title: ({ containers }) => getTitleForContainers(containers), | |
| 1221 | + subtitle: (0, _wordpress_i18n.__)("Interactions Pasted", "elementor") | |
| 1222 | + }); | |
| 1223 | + (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.commandStartEvent)("document/elements/paste-interactions"), (e) => { | |
| 1224 | + const args = e.args; | |
| 1225 | + const containers = args.containers ?? (args.container ? [args.container] : []); | |
| 1226 | + const storageKey = args.storageKey ?? "clipboard"; | |
| 1227 | + if (!containers.length) return; | |
| 1228 | + const [clipboardElement] = getClipboardElements(storageKey) ?? []; | |
| 1229 | + if (!clipboardElement) return; | |
| 1230 | + const newInteractions = normalizeClipboardInteractions(clipboardElement.interactions); | |
| 1231 | + if (!newInteractions) return; | |
| 1232 | + const validContainers = containers.filter((c) => (0, _elementor_editor_elements.getContainer)(c.id)).filter(isAtomicContainer); | |
| 1233 | + if (!validContainers.length) return; | |
| 1234 | + undoablePasteInteractions({ | |
| 1235 | + containers: validContainers, | |
| 1236 | + newInteractions | |
| 1237 | + }); | |
| 1238 | + }); | |
| 1239 | + } | |
| 1240 | + | |
| 1241 | +//#endregion | |
| 1242 | +//#region packages/packages/core/editor-interactions/src/components/controls/direction.tsx | |
| 1243 | + var AXIS = { | |
| 1244 | + top: "vertical", | |
| 1245 | + bottom: "vertical", | |
| 1246 | + left: "horizontal", | |
| 1247 | + right: "horizontal" | |
| 1248 | + }; | |
| 1249 | + function parseValue(value) { | |
| 1250 | + return value.split("-").filter(Boolean); | |
| 1251 | + } | |
| 1252 | + function serializeValue(directions) { | |
| 1253 | + const vertical = directions.find((d) => d === "top" || d === "bottom"); | |
| 1254 | + const horizontal = directions.find((d) => d === "left" || d === "right"); | |
| 1255 | + if (vertical && horizontal) return `${vertical}-${horizontal}`; | |
| 1256 | + return directions[0] ?? ""; | |
| 1257 | + } | |
| 1258 | + function toggleDirection(current, clicked) { | |
| 1259 | + if (current.includes(clicked)) return current.filter((d) => d !== clicked); | |
| 1260 | + return [...current.filter((d) => AXIS[d] !== AXIS[clicked]), clicked]; | |
| 1261 | + } | |
| 1262 | + function Direction({ value, onChange, interactionType }) { | |
| 1263 | + const isIn = interactionType === "in"; | |
| 1264 | + const options = (0, react.useMemo)(() => [ | |
| 1265 | + { | |
| 1266 | + dir: "top", | |
| 1267 | + label: isIn ? (0, _wordpress_i18n.__)("From top", "elementor") : (0, _wordpress_i18n.__)("To top", "elementor"), | |
| 1268 | + Icon: isIn ? _elementor_icons.ArrowDownSmallIcon : _elementor_icons.ArrowUpSmallIcon | |
| 1269 | + }, | |
| 1270 | + { | |
| 1271 | + dir: "bottom", | |
| 1272 | + label: isIn ? (0, _wordpress_i18n.__)("From bottom", "elementor") : (0, _wordpress_i18n.__)("To bottom", "elementor"), | |
| 1273 | + Icon: isIn ? _elementor_icons.ArrowUpSmallIcon : _elementor_icons.ArrowDownSmallIcon | |
| 1274 | + }, | |
| 1275 | + { | |
| 1276 | + dir: "left", | |
| 1277 | + label: isIn ? (0, _wordpress_i18n.__)("From left", "elementor") : (0, _wordpress_i18n.__)("To left", "elementor"), | |
| 1278 | + Icon: isIn ? _elementor_icons.ArrowRightIcon : _elementor_icons.ArrowLeftIcon | |
| 1279 | + }, | |
| 1280 | + { | |
| 1281 | + dir: "right", | |
| 1282 | + label: isIn ? (0, _wordpress_i18n.__)("From right", "elementor") : (0, _wordpress_i18n.__)("To right", "elementor"), | |
| 1283 | + Icon: isIn ? _elementor_icons.ArrowLeftIcon : _elementor_icons.ArrowRightIcon | |
| 1284 | + } | |
| 1285 | + ], [isIn]); | |
| 1286 | + const selectedDirections = (0, react.useMemo)(() => parseValue(value), [value]); | |
| 1287 | + return /* @__PURE__ */ react.createElement(_elementor_editor_controls.StyledToggleButtonGroup, { | |
| 1288 | + size: "tiny", | |
| 1289 | + justify: "end", | |
| 1290 | + sx: { | |
| 1291 | + display: "grid", | |
| 1292 | + gridTemplateColumns: "repeat(4, minmax(0, 25%))", | |
| 1293 | + width: "100%" | |
| 1294 | + } | |
| 1295 | + }, options.map(({ dir, label, Icon }) => /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 1296 | + key: dir, | |
| 1297 | + title: label, | |
| 1298 | + disableFocusListener: true, | |
| 1299 | + placement: "top" | |
| 1300 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.StyledToggleButton, { | |
| 1301 | + value: dir, | |
| 1302 | + selected: selectedDirections.includes(dir), | |
| 1303 | + "aria-label": label, | |
| 1304 | + size: "tiny", | |
| 1305 | + isPlaceholder: false, | |
| 1306 | + onChange: () => { | |
| 1307 | + onChange(serializeValue(toggleDirection(selectedDirections, dir))); | |
| 1308 | + } | |
| 1309 | + }, /* @__PURE__ */ react.createElement(Icon, { fontSize: "tiny" }))))); | |
| 1310 | + } | |
| 1311 | + | |
| 1312 | +//#endregion | |
| 1313 | +//#region packages/packages/core/editor-interactions/src/ui/interactions-promotion-chip.tsx | |
| 1314 | + var InteractionsPromotionChip = (0, react.forwardRef)(({ content, upgradeUrl, anchorRef, trackingData }, ref) => { | |
| 1315 | + const [isOpen, setIsOpen] = (0, react.useState)(false); | |
| 1316 | + (0, _elementor_editor_ui.useCanvasClickHandler)(isOpen, () => setIsOpen(false)); | |
| 1317 | + const toggle = (0, react.useCallback)(() => { | |
| 1318 | + setIsOpen((prev) => { | |
| 1319 | + if (!prev) (0, _elementor_editor_controls.trackViewPromotion)(trackingData); | |
| 1320 | + return !prev; | |
| 1321 | + }); | |
| 1322 | + }, [trackingData]); | |
| 1323 | + (0, react.useImperativeHandle)(ref, () => ({ toggle }), [toggle]); | |
| 1324 | + const handleToggle = (e) => { | |
| 1325 | + e.stopPropagation(); | |
| 1326 | + toggle(); | |
| 1327 | + }; | |
| 1328 | + return /* @__PURE__ */ react.createElement(_elementor_editor_ui.PromotionPopover, { | |
| 1329 | + open: isOpen, | |
| 1330 | + title: (0, _wordpress_i18n.__)("Interactions", "elementor"), | |
| 1331 | + content, | |
| 1332 | + ctaText: (0, _wordpress_i18n.__)("Upgrade now", "elementor"), | |
| 1333 | + ctaUrl: upgradeUrl, | |
| 1334 | + anchorRef, | |
| 1335 | + placement: anchorRef ? "right-start" : void 0, | |
| 1336 | + onClose: (e) => { | |
| 1337 | + e.stopPropagation(); | |
| 1338 | + setIsOpen(false); | |
| 1339 | + }, | |
| 1340 | + onCtaClick: () => (0, _elementor_editor_controls.trackUpgradePromotionClick)(trackingData) | |
| 1341 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 1342 | + onMouseDown: (e) => e.stopPropagation(), | |
| 1343 | + onClick: handleToggle, | |
| 1344 | + sx: { | |
| 1345 | + cursor: "pointer", | |
| 1346 | + display: "inline-flex", | |
| 1347 | + mr: 1 | |
| 1348 | + } | |
| 1349 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PromotionChip, null))); | |
| 1350 | + }); | |
| 1351 | + | |
| 1352 | +//#endregion | |
| 1353 | +//#region packages/packages/core/editor-interactions/src/ui/promotion-select.tsx | |
| 1354 | + function PromotionSelect({ value, onChange, baseOptions, disabledOptions, promotionLabel, promotionContent, upgradeUrl, trackingData }) { | |
| 1355 | + const promotionRef = (0, react.useRef)(null); | |
| 1356 | + const anchorRef = (0, react.useRef)(null); | |
| 1357 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Select, { | |
| 1358 | + value, | |
| 1359 | + onChange: (e) => onChange?.(e.target.value), | |
| 1360 | + fullWidth: true, | |
| 1361 | + displayEmpty: true, | |
| 1362 | + size: "tiny", | |
| 1363 | + MenuProps: { disablePortal: true } | |
| 1364 | + }, Object.entries(baseOptions).map(([key, label]) => /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 1365 | + key, | |
| 1366 | + value: key | |
| 1367 | + }, label)), /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { | |
| 1368 | + ref: anchorRef, | |
| 1369 | + sx: { | |
| 1370 | + cursor: "pointer", | |
| 1371 | + color: "text.tertiary", | |
| 1372 | + fontWeight: "400", | |
| 1373 | + display: "flex", | |
| 1374 | + alignItems: "center" | |
| 1375 | + }, | |
| 1376 | + onMouseDown: (e) => { | |
| 1377 | + e.stopPropagation(); | |
| 1378 | + promotionRef.current?.toggle(); | |
| 1379 | + } | |
| 1380 | + }, promotionLabel ?? (0, _wordpress_i18n.__)("PRO features", "elementor"), /* @__PURE__ */ react.createElement(InteractionsPromotionChip, { | |
| 1381 | + content: promotionContent, | |
| 1382 | + upgradeUrl, | |
| 1383 | + ref: promotionRef, | |
| 1384 | + anchorRef, | |
| 1385 | + trackingData | |
| 1386 | + })), Object.entries(disabledOptions).map(([key, label]) => /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 1387 | + key, | |
| 1388 | + value: key, | |
| 1389 | + disabled: true, | |
| 1390 | + sx: { pl: 3 } | |
| 1391 | + }, label))); | |
| 1392 | + } | |
| 1393 | + | |
| 1394 | +//#endregion | |
| 1395 | +//#region packages/packages/core/editor-interactions/src/components/controls/easing.tsx | |
| 1396 | + var TRACKING_DATA$4 = { | |
| 1397 | + target_name: "interactions_easing", | |
| 1398 | + location_l2: "interactions" | |
| 1399 | + }; | |
| 1400 | + var EASING_OPTIONS = { | |
| 1401 | + easeIn: (0, _wordpress_i18n.__)("Ease In", "elementor"), | |
| 1402 | + easeInOut: (0, _wordpress_i18n.__)("Ease In Out", "elementor"), | |
| 1403 | + easeOut: (0, _wordpress_i18n.__)("Ease Out", "elementor"), | |
| 1404 | + backIn: (0, _wordpress_i18n.__)("Back In", "elementor"), | |
| 1405 | + backInOut: (0, _wordpress_i18n.__)("Back In Out", "elementor"), | |
| 1406 | + backOut: (0, _wordpress_i18n.__)("Back Out", "elementor"), | |
| 1407 | + linear: (0, _wordpress_i18n.__)("Linear", "elementor") | |
| 1408 | + }; | |
| 1409 | + var BASE_EASINGS = ["easeIn"]; | |
| 1410 | + function Easing({}) { | |
| 1411 | + const baseOptions = Object.fromEntries(Object.entries(EASING_OPTIONS).filter(([key]) => BASE_EASINGS.includes(key))); | |
| 1412 | + const disabledOptions = Object.fromEntries(Object.entries(EASING_OPTIONS).filter(([key]) => !BASE_EASINGS.includes(key))); | |
| 1413 | + return /* @__PURE__ */ react.createElement(PromotionSelect, { | |
| 1414 | + value: DEFAULT_VALUES.easing, | |
| 1415 | + baseOptions, | |
| 1416 | + disabledOptions, | |
| 1417 | + promotionContent: (0, _wordpress_i18n.__)("Upgrade to control the smoothness of the interaction.", "elementor"), | |
| 1418 | + upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/", | |
| 1419 | + trackingData: TRACKING_DATA$4 | |
| 1420 | + }); | |
| 1421 | + } | |
| 1422 | + | |
| 1423 | +//#endregion | |
| 1424 | +//#region packages/packages/core/editor-interactions/src/components/controls/effect.tsx | |
| 1425 | + var TRACKING_DATA$3 = { | |
| 1426 | + target_name: "interactions_effect", | |
| 1427 | + location_l2: "interactions" | |
| 1428 | + }; | |
| 1429 | + var EFFECT_OPTIONS = { | |
| 1430 | + fade: (0, _wordpress_i18n.__)("Fade", "elementor"), | |
| 1431 | + slide: (0, _wordpress_i18n.__)("Slide", "elementor"), | |
| 1432 | + scale: (0, _wordpress_i18n.__)("Scale", "elementor"), | |
| 1433 | + custom: (0, _wordpress_i18n.__)("Custom", "elementor") | |
| 1434 | + }; | |
| 1435 | + var BASE_EFFECTS = [ | |
| 1436 | + "fade", | |
| 1437 | + "slide", | |
| 1438 | + "scale" | |
| 1439 | + ]; | |
| 1440 | + function Effect({ value, onChange }) { | |
| 1441 | + const baseOptions = Object.fromEntries(Object.entries(EFFECT_OPTIONS).filter(([key]) => BASE_EFFECTS.includes(key))); | |
| 1442 | + const disabledOptions = Object.fromEntries(Object.entries(EFFECT_OPTIONS).filter(([key]) => !BASE_EFFECTS.includes(key))); | |
| 1443 | + return /* @__PURE__ */ react.createElement(PromotionSelect, { | |
| 1444 | + value: value in baseOptions ? value : DEFAULT_VALUES.effect, | |
| 1445 | + onChange, | |
| 1446 | + baseOptions, | |
| 1447 | + disabledOptions, | |
| 1448 | + promotionLabel: (0, _wordpress_i18n.__)("PRO effects", "elementor"), | |
| 1449 | + promotionContent: (0, _wordpress_i18n.__)("Upgrade to further customize your animation with opacity, scale, move, rotate and more.", "elementor"), | |
| 1450 | + upgradeUrl: "https://go.elementor.com/go-pro-interactions-custom-effect-modal/", | |
| 1451 | + trackingData: TRACKING_DATA$3 | |
| 1452 | + }); | |
| 1453 | + } | |
| 1454 | + | |
| 1455 | +//#endregion | |
| 1456 | +//#region packages/packages/core/editor-interactions/src/components/controls/effect-type.tsx | |
| 1457 | + function EffectType({ value, onChange }) { | |
| 1458 | + const options = [{ | |
| 1459 | + value: "in", | |
| 1460 | + label: (0, _wordpress_i18n.__)("In", "elementor"), | |
| 1461 | + renderContent: () => (0, _wordpress_i18n.__)("In", "elementor"), | |
| 1462 | + showTooltip: true | |
| 1463 | + }, { | |
| 1464 | + value: "out", | |
| 1465 | + label: (0, _wordpress_i18n.__)("Out", "elementor"), | |
| 1466 | + renderContent: () => (0, _wordpress_i18n.__)("Out", "elementor"), | |
| 1467 | + showTooltip: true | |
| 1468 | + }]; | |
| 1469 | + return /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleButtonGroupUi, { | |
| 1470 | + items: options, | |
| 1471 | + exclusive: true, | |
| 1472 | + onChange, | |
| 1473 | + value | |
| 1474 | + }); | |
| 1475 | + } | |
| 1476 | + | |
| 1477 | +//#endregion | |
| 1478 | +//#region packages/packages/core/editor-interactions/src/ui/promotion-overlay-layout.tsx | |
| 1479 | + var OVERLAY_GRID = "1 / 1"; | |
| 1480 | + var CHIP_OFFSET = "50%"; | |
| 1481 | + var PromotionOverlayLayout = (0, react.forwardRef)(({ children, promotionChip }, ref) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 1482 | + ref, | |
| 1483 | + sx: { | |
| 1484 | + display: "grid", | |
| 1485 | + alignItems: "center" | |
| 1486 | + } | |
| 1487 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { | |
| 1488 | + gridArea: OVERLAY_GRID, | |
| 1489 | + marginInlineEnd: CHIP_OFFSET, | |
| 1490 | + justifySelf: "end" | |
| 1491 | + } }, promotionChip))); | |
| 1492 | + | |
| 1493 | +//#endregion | |
| 1494 | +//#region packages/packages/core/editor-interactions/src/components/controls/repeat.tsx | |
| 1495 | + var TRACKING_DATA$2 = { | |
| 1496 | + target_name: "interactions_repeat", | |
| 1497 | + location_l2: "interactions" | |
| 1498 | + }; | |
| 1499 | + var REPEAT_OPTIONS = { | |
| 1500 | + times: (0, _wordpress_i18n.__)("times", "elementor"), | |
| 1501 | + loop: (0, _wordpress_i18n.__)("loop", "elementor") | |
| 1502 | + }; | |
| 1503 | + var REPEAT_TOOLTIPS = { | |
| 1504 | + times: (0, _wordpress_i18n.__)("Enable number", "elementor"), | |
| 1505 | + loop: (0, _wordpress_i18n.__)("Infinite repeat", "elementor") | |
| 1506 | + }; | |
| 1507 | + function Repeat() { | |
| 1508 | + const repeatContainerRef = (0, react.useRef)(null); | |
| 1509 | + const options = [{ | |
| 1510 | + value: REPEAT_OPTIONS.times, | |
| 1511 | + disabled: true, | |
| 1512 | + label: REPEAT_TOOLTIPS.times, | |
| 1513 | + renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.Number123Icon, { fontSize: size }), | |
| 1514 | + showTooltip: true | |
| 1515 | + }, { | |
| 1516 | + value: REPEAT_OPTIONS.loop, | |
| 1517 | + disabled: true, | |
| 1518 | + label: REPEAT_TOOLTIPS.loop, | |
| 1519 | + renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.RepeatIcon, { fontSize: size }), | |
| 1520 | + showTooltip: true | |
| 1521 | + }]; | |
| 1522 | + return /* @__PURE__ */ react.createElement(PromotionOverlayLayout, { | |
| 1523 | + ref: repeatContainerRef, | |
| 1524 | + promotionChip: /* @__PURE__ */ react.createElement(InteractionsPromotionChip, { | |
| 1525 | + content: (0, _wordpress_i18n.__)("Upgrade to control how many times the animation repeats.", "elementor"), | |
| 1526 | + upgradeUrl: "https://go.elementor.com/go-pro-interactions-repeat-modal/", | |
| 1527 | + anchorRef: repeatContainerRef, | |
| 1528 | + trackingData: TRACKING_DATA$2 | |
| 1529 | + }) | |
| 1530 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleButtonGroupUi, { | |
| 1531 | + items: options, | |
| 1532 | + exclusive: true, | |
| 1533 | + onChange: () => {}, | |
| 1534 | + value: "" | |
| 1535 | + })); | |
| 1536 | + } | |
| 1537 | + | |
| 1538 | +//#endregion | |
| 1539 | +//#region packages/packages/core/editor-interactions/src/components/controls/replay.tsx | |
| 1540 | + var TRACKING_DATA$1 = { | |
| 1541 | + target_name: "interactions_replay", | |
| 1542 | + location_l2: "interactions" | |
| 1543 | + }; | |
| 1544 | + var REPLAY_OPTIONS = { | |
| 1545 | + no: (0, _wordpress_i18n.__)("No", "elementor"), | |
| 1546 | + yes: (0, _wordpress_i18n.__)("Yes", "elementor") | |
| 1547 | + }; | |
| 1548 | + var BASE_REPLAY = ["no"]; | |
| 1549 | + function Replay({ onChange }) { | |
| 1550 | + const replayContainerRef = (0, react.useRef)(null); | |
| 1551 | + const options = [{ | |
| 1552 | + value: false, | |
| 1553 | + disabled: false, | |
| 1554 | + label: REPLAY_OPTIONS.no, | |
| 1555 | + renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }), | |
| 1556 | + showTooltip: true | |
| 1557 | + }, { | |
| 1558 | + value: true, | |
| 1559 | + disabled: true, | |
| 1560 | + label: REPLAY_OPTIONS.yes, | |
| 1561 | + renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.CheckIcon, { fontSize: size }), | |
| 1562 | + showTooltip: true | |
| 1563 | + }]; | |
| 1564 | + return /* @__PURE__ */ react.createElement(PromotionOverlayLayout, { | |
| 1565 | + ref: replayContainerRef, | |
| 1566 | + promotionChip: /* @__PURE__ */ react.createElement(InteractionsPromotionChip, { | |
| 1567 | + content: (0, _wordpress_i18n.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"), | |
| 1568 | + upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/", | |
| 1569 | + anchorRef: replayContainerRef, | |
| 1570 | + trackingData: TRACKING_DATA$1 | |
| 1571 | + }) | |
| 1572 | + }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleButtonGroupUi, { | |
| 1573 | + items: options, | |
| 1574 | + exclusive: true, | |
| 1575 | + onChange, | |
| 1576 | + value: false | |
| 1577 | + })); | |
| 1578 | + } | |
| 1579 | + | |
| 1580 | +//#endregion | |
| 1581 | +//#region packages/packages/core/editor-interactions/src/components/controls/trigger.tsx | |
| 1582 | + var TRACKING_DATA = { | |
| 1583 | + target_name: "interactions_trigger", | |
| 1584 | + location_l2: "interactions" | |
| 1585 | + }; | |
| 1586 | + var TRIGGER_OPTIONS = { | |
| 1587 | + load: (0, _wordpress_i18n.__)("Page load", "elementor"), | |
| 1588 | + scrollIn: (0, _wordpress_i18n.__)("Scroll into view", "elementor"), | |
| 1589 | + scrollOn: (0, _wordpress_i18n.__)("While scrolling", "elementor"), | |
| 1590 | + hover: (0, _wordpress_i18n.__)("On hover", "elementor"), | |
| 1591 | + click: (0, _wordpress_i18n.__)("On click", "elementor") | |
| 1592 | + }; | |
| 1593 | + var BASE_TRIGGERS = ["load", "scrollIn"]; | |
| 1594 | + function Trigger({ value, onChange }) { | |
| 1595 | + const baseOptions = Object.fromEntries(Object.entries(TRIGGER_OPTIONS).filter(([key]) => BASE_TRIGGERS.includes(key))); | |
| 1596 | + const disabledOptions = Object.fromEntries(Object.entries(TRIGGER_OPTIONS).filter(([key]) => !BASE_TRIGGERS.includes(key))); | |
| 1597 | + return /* @__PURE__ */ react.createElement(PromotionSelect, { | |
| 1598 | + value: value in baseOptions ? value : DEFAULT_VALUES.trigger, | |
| 1599 | + onChange, | |
| 1600 | + baseOptions, | |
| 1601 | + disabledOptions, | |
| 1602 | + promotionLabel: (0, _wordpress_i18n.__)("PRO triggers", "elementor"), | |
| 1603 | + promotionContent: (0, _wordpress_i18n.__)("Upgrade to unlock more interactions triggers.", "elementor"), | |
| 1604 | + upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/", | |
| 1605 | + trackingData: TRACKING_DATA | |
| 1606 | + }); | |
| 1607 | + } | |
| 1608 | + | |
| 1609 | +//#endregion | |
| 1610 | +//#region packages/packages/core/editor-interactions/src/hooks/on-duplicate.ts | |
| 1611 | + function initCleanInteractionIdsOnDuplicate() { | |
| 1612 | + (0, _elementor_editor_v1_adapters.registerDataHook)("after", "document/elements/duplicate", (_args, result) => { | |
| 1613 | + if (!result || typeof result === "boolean" && result === false) return; | |
| 1614 | + (Array.isArray(result) ? result : [result]).forEach((container) => { | |
| 1615 | + cleanInteractionIdsRecursive(container.id); | |
| 1616 | + }); | |
| 1617 | + window.dispatchEvent(new CustomEvent("elementor/element/update_interactions")); | |
| 1618 | + }); | |
| 1619 | + } | |
| 1620 | + function cleanInteractionIdsRecursive(elementId) { | |
| 1621 | + const container = (0, _elementor_editor_elements.getContainer)(elementId); | |
| 1622 | + if (!container) return; | |
| 1623 | + (0, _elementor_editor_elements.getAllDescendants)(container).forEach((element) => { | |
| 1624 | + cleanInteractionIds(element.id); | |
| 1625 | + }); | |
| 1626 | + } | |
| 1627 | + function cleanInteractionIds(elementId) { | |
| 1628 | + const container = (0, _elementor_editor_elements.getContainer)(elementId); | |
| 1629 | + if (!container) return; | |
| 1630 | + const interactions = container.model.get("interactions"); | |
| 1631 | + if (!interactions || !interactions.items) return; | |
| 1632 | + const updatedInteractions = structuredClone(interactions); | |
| 1633 | + updatedInteractions?.items?.forEach((interaction) => { | |
| 1634 | + if (interaction.$$type === "interaction-item" && interaction.value) interaction.value.interaction_id = createString(generateTempInteractionId()); | |
| 1635 | + }); | |
| 1636 | + container.model.set("interactions", updatedInteractions); | |
| 1637 | + } | |
| 1638 | + | |
| 1639 | +//#endregion | |
| 1640 | +//#region packages/packages/core/editor-interactions/src/mcp/tools/schema.ts | |
| 1641 | + var baseSchema = { | |
| 1642 | + trigger: _elementor_schema.z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"), | |
| 1643 | + effect: _elementor_schema.z.enum([ | |
| 1644 | + "fade", | |
| 1645 | + "slide", | |
| 1646 | + "scale" | |
| 1647 | + ]).optional().describe("Animation effect type"), | |
| 1648 | + effectType: _elementor_schema.z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"), | |
| 1649 | + direction: _elementor_schema.z.enum([ | |
| 1650 | + "top", | |
| 1651 | + "bottom", | |
| 1652 | + "left", | |
| 1653 | + "right", | |
| 1654 | + "top-left", | |
| 1655 | + "top-right", | |
| 1656 | + "bottom-left", | |
| 1657 | + "bottom-right" | |
| 1658 | + ]).optional().describe("Direction of the Animation. Can be one of the following or empty if not needed. At slide effect, this is required field."), | |
| 1659 | + duration: _elementor_schema.z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"), | |
| 1660 | + delay: _elementor_schema.z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"), | |
| 1661 | + easing: _elementor_schema.z.enum(["easeIn"]).optional().describe("Easing function for the animation. Use \"easeIn\" for free tier."), | |
| 1662 | + excludedBreakpoints: _elementor_schema.z.array(_elementor_schema.z.enum([ | |
| 1663 | + "widescreen", | |
| 1664 | + "desktop", | |
| 1665 | + "laptop", | |
| 1666 | + "tablet_extra", | |
| 1667 | + "tablet", | |
| 1668 | + "mobile_extra", | |
| 1669 | + "mobile" | |
| 1670 | + ])).optional().describe("Breakpoint IDs on which this interaction is disabled (e.g. [\"mobile\", \"tablet\"]). Fetch the \"elementor://breakpoints/list\" resource to get the valid IDs for the current site. Omit to enable on all breakpoints.") | |
| 1671 | + }; | |
| 1672 | + var proSchema = { | |
| 1673 | + trigger: _elementor_schema.z.enum([ | |
| 1674 | + "load", | |
| 1675 | + "scrollIn", | |
| 1676 | + "scrollOut", | |
| 1677 | + "scrollOn", | |
| 1678 | + "hover", | |
| 1679 | + "click" | |
| 1680 | + ]).optional().describe("Event that triggers the animation"), | |
| 1681 | + effect: _elementor_schema.z.enum([ | |
| 1682 | + "fade", | |
| 1683 | + "slide", | |
| 1684 | + "scale", | |
| 1685 | + "custom" | |
| 1686 | + ]).optional().describe("Animation effect type"), | |
| 1687 | + easing: _elementor_schema.z.enum([ | |
| 1688 | + "easeIn", | |
| 1689 | + "easeInOut", | |
| 1690 | + "easeOut", | |
| 1691 | + "backIn", | |
| 1692 | + "backInOut", | |
| 1693 | + "backOut", | |
| 1694 | + "linear" | |
| 1695 | + ]).optional().describe("Easing function for the animation."), | |
| 1696 | + customEffects: _elementor_schema.z.object({ keyframes: _elementor_schema.z.array(_elementor_schema.z.object({ | |
| 1697 | + stop: _elementor_schema.z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"), | |
| 1698 | + value: _elementor_schema.z.object({ | |
| 1699 | + opacity: _elementor_schema.z.number().min(0).max(1).describe("The opacity of the keyframe"), | |
| 1700 | + scale: _elementor_schema.z.object({ | |
| 1701 | + x: _elementor_schema.z.number().min(0).max(1).describe("The x scale of the keyframe"), | |
| 1702 | + y: _elementor_schema.z.number().min(0).max(1).describe("The y scale of the keyframe") | |
| 1703 | + }).optional().describe("The scale of the keyframe"), | |
| 1704 | + rotate: _elementor_schema.z.object({ | |
| 1705 | + x: _elementor_schema.z.number().min(0).max(360).describe("The x rotate of the keyframe"), | |
| 1706 | + y: _elementor_schema.z.number().min(0).max(360).describe("The y rotate of the keyframe"), | |
| 1707 | + z: _elementor_schema.z.number().min(0).max(360).describe("The z rotate of the keyframe") | |
| 1708 | + }).optional().describe("The rotate of the keyframe"), | |
| 1709 | + move: _elementor_schema.z.object({ | |
| 1710 | + x: _elementor_schema.z.number().min(0).max(1).describe("The x move of the keyframe"), | |
| 1711 | + y: _elementor_schema.z.number().min(0).max(1).describe("The y move of the keyframe"), | |
| 1712 | + z: _elementor_schema.z.number().min(0).max(1).describe("The z move of the keyframe") | |
| 1713 | + }).optional().describe("The move of the keyframe"), | |
| 1714 | + skew: _elementor_schema.z.object({ | |
| 1715 | + x: _elementor_schema.z.number().min(0).max(360).describe("The x skew of the keyframe"), | |
| 1716 | + y: _elementor_schema.z.number().min(0).max(360).describe("The y skew of the keyframe") | |
| 1717 | + }).optional().describe("The skew of the keyframe") | |
| 1718 | + }) | |
| 1719 | + })).describe("The keyframes of the custom effect") }).optional().describe("The custom effect to use for the animation") | |
| 1720 | + }; | |
| 1721 | + | |
| 1722 | +//#endregion | |
| 1723 | +//#region packages/packages/core/editor-interactions/src/mcp/resources/interactions-schema-resource.ts | |
| 1724 | + var INTERACTIONS_SCHEMA_URI = "elementor://interactions/schema"; | |
| 1725 | + var initInteractionsSchemaResource = (reg) => { | |
| 1726 | + const { resource } = reg; | |
| 1727 | + const schema = (0, _elementor_utils.isProActive)() ? { | |
| 1728 | + ...baseSchema, | |
| 1729 | + ...proSchema | |
| 1730 | + } : baseSchema; | |
| 1731 | + resource("interactions-schema", INTERACTIONS_SCHEMA_URI, { description: "Schema describing all available options for element interactions." }, async () => { | |
| 1732 | + return { contents: [{ | |
| 1733 | + uri: INTERACTIONS_SCHEMA_URI, | |
| 1734 | + mimeType: "application/json", | |
| 1735 | + text: JSON.stringify(schema) | |
| 1736 | + }] }; | |
| 1737 | + }); | |
| 1738 | + }; | |
| 1739 | + | |
| 1740 | +//#endregion | |
| 1741 | +//#region packages/packages/core/editor-interactions/src/mcp/constants.ts | |
| 1742 | + var MAX_INTERACTIONS_PER_ELEMENT = 5; | |
| 1743 | + var EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION = `Everything related to V4 ( Atomic ) interactions. | |
| 1744 | +# Interactions | |
| 1745 | +- Create/update/delete interactions | |
| 1746 | +- Get list of interactions | |
| 1747 | +- Get details of an interaction | |
| 1748 | +`; | |
| 1749 | + var EDITOR_INTERACTIONS_MCP_DESCRIPTION = `MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view. | |
| 1750 | + ** IMPORTANT ** | |
| 1751 | + Use the "interactions-schema" resource to get the schema of the interactions. | |
| 1752 | + Actions: | |
| 1753 | + - get: Read the current interactions on the element. | |
| 1754 | + - add: Add a new interaction (max ${5} per element). | |
| 1755 | + - update: Update an existing interaction by its interactionId. | |
| 1756 | + - delete: Remove a specific interaction by its interactionId. | |
| 1757 | + - clear: Remove all interactions from the element. | |
| 1758 | + | |
| 1759 | + For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing. | |
| 1760 | + Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]). | |
| 1761 | + Example Get Request: | |
| 1762 | + { | |
| 1763 | + "elementId": "123", | |
| 1764 | + "action": "get", | |
| 1765 | + "interactionId": "123", | |
| 1766 | + "animationData": { | |
| 1767 | + "trigger": "click", | |
| 1768 | + "effect": "fade", | |
| 1769 | + } | |
| 1770 | + } | |
| 1771 | + Example Add Request: | |
| 1772 | + { | |
| 1773 | + "elementId": "123", | |
| 1774 | + "action": "add", | |
| 1775 | + "animationData": { | |
| 1776 | + "effectType": "in", | |
| 1777 | + "direction": "top", | |
| 1778 | + "trigger": "click", | |
| 1779 | + "effect": "fade", | |
| 1780 | + "duration": 1000, | |
| 1781 | + "delay": 0, | |
| 1782 | + "easing": "easeIn", | |
| 1783 | + "excludedBreakpoints": ["mobile", "tablet"], | |
| 1784 | + } | |
| 1785 | + } | |
| 1786 | + Example Update Request: | |
| 1787 | + { | |
| 1788 | + "elementId": "123", | |
| 1789 | + "action": "update", | |
| 1790 | + "interactionId": "123", | |
| 1791 | + "animationData": { | |
| 1792 | + "trigger": "click", | |
| 1793 | + "effect": "fade", | |
| 1794 | + } | |
| 1795 | + } | |
| 1796 | + Example Delete Request: | |
| 1797 | + { | |
| 1798 | + "elementId": "123", | |
| 1799 | + "action": "delete", | |
| 1800 | + "interactionId": "123", | |
| 1801 | + } | |
| 1802 | + Example Clear Request: | |
| 1803 | + { | |
| 1804 | + "elementId": "123", | |
| 1805 | + "action": "clear", | |
| 1806 | + }`; | |
| 1807 | + | |
| 1808 | +//#endregion | |
| 1809 | +//#region packages/packages/core/editor-interactions/src/mcp/tools/manage-element-interaction-tool.ts | |
| 1810 | + var EMPTY_INTERACTIONS = { | |
| 1811 | + version: 1, | |
| 1812 | + items: [] | |
| 1813 | + }; | |
| 1814 | + var EFFECTS_WITHOUT_TYPE = ["custom"]; | |
| 1815 | + var BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list"; | |
| 1816 | + var initManageElementInteractionTool = (reg) => { | |
| 1817 | + const { addTool } = reg; | |
| 1818 | + const extendedSchema = (0, _elementor_utils.isProActive)() ? { | |
| 1819 | + ...baseSchema, | |
| 1820 | + ...proSchema | |
| 1821 | + } : baseSchema; | |
| 1822 | + addTool({ | |
| 1823 | + name: "manage-element-interaction", | |
| 1824 | + description: `Manage the element interaction.`, | |
| 1825 | + schema: { | |
| 1826 | + elementId: _elementor_schema.z.string().describe("The ID of the element to read or modify interactions on"), | |
| 1827 | + action: _elementor_schema.z.enum([ | |
| 1828 | + "get", | |
| 1829 | + "add", | |
| 1830 | + "update", | |
| 1831 | + "delete", | |
| 1832 | + "clear" | |
| 1833 | + ]).describe("Operation to perform. Use \"get\" first to inspect existing interactions."), | |
| 1834 | + interactionId: _elementor_schema.z.string().optional().describe("Interaction ID — required for update and delete. Obtain from a prior \"get\" call."), | |
| 1835 | + ...extendedSchema | |
| 1836 | + }, | |
| 1837 | + requiredResources: [{ | |
| 1838 | + uri: INTERACTIONS_SCHEMA_URI, | |
| 1839 | + description: "Interactions schema with all available options" | |
| 1840 | + }, { | |
| 1841 | + uri: BREAKPOINTS_SCHEMA_URI, | |
| 1842 | + description: "Available breakpoint IDs for excludedBreakpoints" | |
| 1843 | + }], | |
| 1844 | + isDestructive: true, | |
| 1845 | + outputSchema: { | |
| 1846 | + success: _elementor_schema.z.boolean().describe("Whether the action was successful"), | |
| 1847 | + action: _elementor_schema.z.enum([ | |
| 1848 | + "get", | |
| 1849 | + "add", | |
| 1850 | + "update", | |
| 1851 | + "delete", | |
| 1852 | + "clear" | |
| 1853 | + ]).describe("Operation to perform. Use \"get\" first to inspect existing interactions."), | |
| 1854 | + elementId: _elementor_schema.z.string().optional().describe("The ID of the element to read or modify interactions on"), | |
| 1855 | + interactions: _elementor_schema.z.array(_elementor_schema.z.any()).optional().describe("The interactions on the element"), | |
| 1856 | + count: _elementor_schema.z.number().optional().describe("The number of interactions on the element") | |
| 1857 | + }, | |
| 1858 | + handler: (input) => { | |
| 1859 | + const { elementId, action, interactionId, ...animationData } = input; | |
| 1860 | + const { effectType, ...restAnimationData } = animationData; | |
| 1861 | + const effect = restAnimationData.effect; | |
| 1862 | + const resolvedType = effectType ?? (effect && !EFFECTS_WITHOUT_TYPE.includes(effect) ? "in" : void 0); | |
| 1863 | + const currentInteractions = interactionsRepository.all().find((data) => data.elementId === elementId)?.interactions ?? EMPTY_INTERACTIONS; | |
| 1864 | + if (action === "get") { | |
| 1865 | + const summary = currentInteractions.items.map((item) => { | |
| 1866 | + const { value } = item; | |
| 1867 | + const animValue = value.animation.value; | |
| 1868 | + const timingValue = animValue.timing_config.value; | |
| 1869 | + const configValue = animValue.config.value; | |
| 1870 | + return { | |
| 1871 | + id: extractString(value.interaction_id), | |
| 1872 | + trigger: extractString(value.trigger), | |
| 1873 | + effect: extractString(animValue.effect), | |
| 1874 | + effectType: extractString(animValue.type), | |
| 1875 | + direction: extractString(animValue.direction), | |
| 1876 | + duration: extractSize(timingValue.duration), | |
| 1877 | + delay: extractSize(timingValue.delay), | |
| 1878 | + easing: extractString(configValue.easing), | |
| 1879 | + excludedBreakpoints: extractExcludedBreakpoints(value.breakpoints) | |
| 1880 | + }; | |
| 1881 | + }); | |
| 1882 | + return { | |
| 1883 | + success: true, | |
| 1884 | + elementId, | |
| 1885 | + action, | |
| 1886 | + interactions: summary, | |
| 1887 | + count: summary.length | |
| 1888 | + }; | |
| 1889 | + } | |
| 1890 | + let updatedItems = [...currentInteractions.items]; | |
| 1891 | + switch (action) { | |
| 1892 | + case "add": { | |
| 1893 | + if (updatedItems.length >= 5) throw new Error(`Cannot add more than ${5} interactions per element. Current count: ${updatedItems.length}. Delete an existing interaction first.`); | |
| 1894 | + const newItem = createInteractionItem({ | |
| 1895 | + interactionId: generateTempInteractionId(), | |
| 1896 | + ...restAnimationData, | |
| 1897 | + type: resolvedType | |
| 1898 | + }); | |
| 1899 | + updatedItems = [...updatedItems, newItem]; | |
| 1900 | + break; | |
| 1901 | + } | |
| 1902 | + case "update": { | |
| 1903 | + if (!interactionId) throw new Error("interactionId is required for the update action."); | |
| 1904 | + const itemIndex = updatedItems.findIndex((item) => extractString(item.value.interaction_id) === interactionId); | |
| 1905 | + if (itemIndex === -1) throw new Error(`Interaction with ID "${interactionId}" not found on element "${elementId}".`); | |
| 1906 | + const updatedItem = createInteractionItem({ | |
| 1907 | + interactionId, | |
| 1908 | + ...restAnimationData, | |
| 1909 | + type: resolvedType | |
| 1910 | + }); | |
| 1911 | + updatedItems = [ | |
| 1912 | + ...updatedItems.slice(0, itemIndex), | |
| 1913 | + updatedItem, | |
| 1914 | + ...updatedItems.slice(itemIndex + 1) | |
| 1915 | + ]; | |
| 1916 | + break; | |
| 1917 | + } | |
| 1918 | + case "delete": { | |
| 1919 | + if (!interactionId) throw new Error("interactionId is required for the delete action."); | |
| 1920 | + const beforeCount = updatedItems.length; | |
| 1921 | + updatedItems = updatedItems.filter((item) => extractString(item.value.interaction_id) !== interactionId); | |
| 1922 | + if (updatedItems.length === beforeCount) throw new Error(`Interaction with ID "${interactionId}" not found on element "${elementId}".`); | |
| 1923 | + break; | |
| 1924 | + } | |
| 1925 | + case "clear": | |
| 1926 | + updatedItems = []; | |
| 1927 | + break; | |
| 1928 | + } | |
| 1929 | + const updatedInteractions = { | |
| 1930 | + ...currentInteractions, | |
| 1931 | + items: updatedItems | |
| 1932 | + }; | |
| 1933 | + try { | |
| 1934 | + (0, _elementor_editor_elements.updateElementInteractions)({ | |
| 1935 | + elementId, | |
| 1936 | + interactions: updatedInteractions | |
| 1937 | + }); | |
| 1938 | + } catch (error) { | |
| 1939 | + throw new Error(`Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`); | |
| 1940 | + } | |
| 1941 | + return { | |
| 1942 | + success: true, | |
| 1943 | + action, | |
| 1944 | + elementId, | |
| 1945 | + count: updatedItems.length | |
| 1946 | + }; | |
| 1947 | + } | |
| 1948 | + }); | |
| 1949 | + }; | |
| 1950 | + | |
| 1951 | +//#endregion | |
| 1952 | +//#region packages/packages/core/editor-interactions/src/mcp/index.ts | |
| 1953 | + var initMcpInteractions = (reg) => { | |
| 1954 | + const { setMCPDescription } = reg; | |
| 1955 | + setMCPDescription(`Everything related to V4 ( Atomic ) interactions. | |
| 1956 | +# Interactions | |
| 1957 | +- Create/update/delete interactions | |
| 1958 | +- Get list of interactions | |
| 1959 | +- Get details of an interaction | |
| 1960 | +`); | |
| 1961 | + initInteractionsSchemaResource(reg); | |
| 1962 | + initManageElementInteractionTool(reg); | |
| 1963 | + }; | |
| 1964 | + | |
| 1965 | +//#endregion | |
| 1966 | +//#region packages/packages/core/editor-interactions/src/init.ts | |
| 1967 | + function init() { | |
| 1968 | + try { | |
| 1969 | + interactionsRepository.register(documentElementsInteractionsProvider); | |
| 1970 | + initCleanInteractionIdsOnDuplicate(); | |
| 1971 | + initPasteInteractionsCommand(); | |
| 1972 | + registerInteractionsControl({ | |
| 1973 | + type: "trigger", | |
| 1974 | + component: Trigger, | |
| 1975 | + options: ["load", "scrollIn"] | |
| 1976 | + }); | |
| 1977 | + registerInteractionsControl({ | |
| 1978 | + type: "easing", | |
| 1979 | + component: Easing, | |
| 1980 | + options: ["easeIn"] | |
| 1981 | + }); | |
| 1982 | + registerInteractionsControl({ | |
| 1983 | + type: "replay", | |
| 1984 | + component: Replay, | |
| 1985 | + options: ["no"] | |
| 1986 | + }); | |
| 1987 | + registerInteractionsControl({ | |
| 1988 | + type: "effectType", | |
| 1989 | + component: EffectType, | |
| 1990 | + options: ["in", "out"] | |
| 1991 | + }); | |
| 1992 | + registerInteractionsControl({ | |
| 1993 | + type: "direction", | |
| 1994 | + component: Direction, | |
| 1995 | + options: [ | |
| 1996 | + "top", | |
| 1997 | + "bottom", | |
| 1998 | + "left", | |
| 1999 | + "right" | |
| 2000 | + ] | |
| 2001 | + }); | |
| 2002 | + registerInteractionsControl({ | |
| 2003 | + type: "effect", | |
| 2004 | + component: Effect, | |
| 2005 | + options: [ | |
| 2006 | + "fade", | |
| 2007 | + "slide", | |
| 2008 | + "scale" | |
| 2009 | + ] | |
| 2010 | + }); | |
| 2011 | + registerInteractionsControl({ | |
| 2012 | + type: "repeat", | |
| 2013 | + component: Repeat | |
| 2014 | + }); | |
| 2015 | + initMcpInteractions((0, _elementor_editor_mcp.getMCPByDomain)("interactions", { | |
| 2016 | + docs: EDITOR_INTERACTIONS_MCP_DESCRIPTION, | |
| 2017 | + instructions: EDITOR_INTERACTIONS_MCP_SHORT_DESCRIPTION | |
| 2018 | + })); | |
| 2019 | + } catch (error) { | |
| 2020 | + throw error; | |
| 2021 | + } | |
| 2022 | + } | |
| 2023 | + | |
| 2024 | +//#endregion | |
| 2025 | +//#region packages/packages/core/editor-interactions/src/index.ts | |
| 2026 | + var src_exports = /* @__PURE__ */ __exportAll({ | |
| 2027 | + BASE_EASINGS: () => BASE_EASINGS, | |
| 2028 | + BASE_EFFECTS: () => BASE_EFFECTS, | |
| 2029 | + BASE_REPLAY: () => BASE_REPLAY, | |
| 2030 | + BASE_TRIGGERS: () => BASE_TRIGGERS, | |
| 2031 | + DEFAULT_VALUES: () => DEFAULT_VALUES, | |
| 2032 | + EASING_OPTIONS: () => EASING_OPTIONS, | |
| 2033 | + EFFECT_OPTIONS: () => EFFECT_OPTIONS, | |
| 2034 | + ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX: () => ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, | |
| 2035 | + EmptyState: () => EmptyState, | |
| 2036 | + InteractionsTab: () => InteractionsTab, | |
| 2037 | + REPEAT_OPTIONS: () => REPEAT_OPTIONS, | |
| 2038 | + REPEAT_TOOLTIPS: () => REPEAT_TOOLTIPS, | |
| 2039 | + REPLAY_OPTIONS: () => REPLAY_OPTIONS, | |
| 2040 | + SCROLL_INTERACTION_EVENT: () => SCROLL_INTERACTION_EVENT, | |
| 2041 | + TRIGGER_OPTIONS: () => TRIGGER_OPTIONS, | |
| 2042 | + buildDisplayLabel: () => buildDisplayLabel, | |
| 2043 | + createAnimationPreset: () => createAnimationPreset, | |
| 2044 | + createBoolean: () => createBoolean, | |
| 2045 | + createConfig: () => createConfig, | |
| 2046 | + createDefaultInteractionItem: () => createDefaultInteractionItem, | |
| 2047 | + createDefaultInteractions: () => createDefaultInteractions, | |
| 2048 | + createExcludedBreakpoints: () => createExcludedBreakpoints, | |
| 2049 | + createInteractionBreakpoints: () => createInteractionBreakpoints, | |
| 2050 | + createInteractionItem: () => createInteractionItem, | |
| 2051 | + createInteractionsProvider: () => createInteractionsProvider, | |
| 2052 | + createNumber: () => createNumber, | |
| 2053 | + createString: () => createString, | |
| 2054 | + createTimingConfig: () => createTimingConfig, | |
| 2055 | + dispatchScrollInteraction: () => dispatchScrollInteraction, | |
| 2056 | + extractBoolean: () => extractBoolean, | |
| 2057 | + extractExcludedBreakpoints: () => extractExcludedBreakpoints, | |
| 2058 | + extractScrollOverlayParams: () => extractScrollOverlayParams, | |
| 2059 | + extractSize: () => extractSize, | |
| 2060 | + extractString: () => extractString, | |
| 2061 | + formatSizeValue: () => formatSizeValue, | |
| 2062 | + generateTempInteractionId: () => generateTempInteractionId, | |
| 2063 | + getInteractionsConfig: () => getInteractionsConfig, | |
| 2064 | + init: () => init, | |
| 2065 | + interactionsRepository: () => interactionsRepository, | |
| 2066 | + isTempId: () => isTempId, | |
| 2067 | + parseSizeValue: () => parseSizeValue, | |
| 2068 | + registerInteractionsControl: () => registerInteractionsControl, | |
| 2069 | + resolveDirection: () => resolveDirection, | |
| 2070 | + syncGridOverlay: () => syncGridOverlay, | |
| 2071 | + useElementInteractions: () => useElementInteractions | |
| 2072 | + }); | |
| 2073 | + | |
| 2074 | +//#endregion | |
| 2075 | +//#region \0elementor-package-library-entry | |
| 2076 | + (window.elementorV2 = window.elementorV2 || {}).editorInteractions = src_exports; | |
| 2077 | + | |
| 2078 | +//#endregion | |
| 2079 | +})(React, elementorV2.icons, elementorV2.ui, wp.i18n, elementorV2.session, elementorV2.editorElements, elementorV2.editorV1Adapters, elementorV2.editorProps, elementorV2.editorControls, elementorV2.events, elementorV2.editorResponsive, elementorV2.editorMcp, elementorV2.editorUi, elementorV2.utils, elementorV2.schema); | |
| 2080 | +window.elementorV2.editorInteractions?.init?.(); | |
| 3 | 2081 | //# sourceMappingURL=editor-interactions.js.map |