nextptIsolate();function nextptIsolate(){document.addEventListener("DOMContentLoaded",function(){const interval=setInterval(()=>{var iframe=document.getElementById("bricks-builder-iframe");if(iframe&&iframe.contentWindow&&iframe.contentWindow.document){var iframeElement=iframe.contentWindow.document.querySelector(".iframe");if(iframeElement){var iframeLoaded=iframeElement.__vue_app__&&iframeElement.__vue_app__.config.globalProperties.$_state.iframeLoaded;if(iframeLoaded&&iframeElement.classList.contains("mounted")){clearInterval(interval);initIconAndAnimator()}}}},100)});function initIconAndAnimator(){initIcon();initUserCustomizations();initAnimator();function initIcon(){const animatorIcon=document.createElement("li");animatorIcon.setAttribute("class","nb-ptanimator-icon");animatorIcon.setAttribute("data-balloon"," Page Transitions");animatorIcon.setAttribute("data-balloon-pos","bottom");const redo=document.querySelector("#bricks-toolbar .group-wrapper.end .redo");if(redo){redo.after(animatorIcon)}
animatorIcon.innerHTML=`<span class="bricks-svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="103" height="102" viewBox="0 0 103 102" fill="none">
            <rect x="0.947693" width="102" height="102" rx="51" fill="url(#pattern0_1926_124)"/>
            <defs>
            <pattern id="pattern0_1926_124" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image0_1926_124" transform="translate(0 -0.00574713) scale(0.0114943)"/>
            </pattern>
            <image id="image0_1926_124" width="87" height="88" xlink:href="data:image/png;base64, "/>
            </defs>
            </svg>
            </span>`}
function initUserCustomizations(){var sheet=document.styleSheets[0];sheet.insertRule(`:root{--ptanimator-accent-background: ${PageTransitionsAccentColor.accent_color} !important}`);sheet.insertRule(`:root{--ptanimator-accent-background-transparent: ${PageTransitionsAccentColor.accent_color + "4f"} !important}`)}
function initAnimator(){let initiated=!1;function openPTs(){if(!initiated){var jsonString=data_pagetransitions.data_pagetransitions.replace(/\\/g,"");if(jsonString!=""){new pageTransitionsPoblator(JSON.parse(jsonString))}else{new pageTransitionsPoblator(jsonString)}
initiated=!0;document.querySelector(".nb-ptanimator-icon").removeEventListener("click",handleClick);document.removeEventListener("keydown",handleKeydown)}}
function handleClick(){openPTs()}
function handleKeydown(event){if(event.ctrlKey&&event.shiftKey&&event.key===PageTransitionsShortcut.shortcut){openPTs()}}
document.querySelector(".nb-ptanimator-icon").addEventListener("click",handleClick);document.addEventListener("keydown",handleKeydown)}}
class pageTransitionsPoblator{JSONobject;pageTransitions;settingsObject;folders=[];ptanimatorHeight;timelineViewHeight;timelinesWidth;animationsWidth;constructor(ptJsonString){this.JSONobject=ptJsonString;this.poblatePTAnimatorDimensions(this.JSONobject);this.poblateSettings(this.JSONobject);this.poblateFolders(this.JSONobject);this.pageTransitions=new pageTransitions({toggleButton:document.querySelector(".nb-ptanimator-icon"),ptanimatorHeight:this.ptanimatorHeight,timelineViewHeight:this.timelineViewHeight,timelinesWidth:this.timelinesWidth,animationsWidth:this.animationsWidth,settingsObject:this.settingsObject,folders:this.folders,})}
poblatePTAnimatorDimensions(JSONobject){if(JSONobject==""){this.ptanimatorHeight="600";this.timelineViewHeight="";this.timelinesWidth="";this.animationsWidth=""}else{this.ptanimatorHeight=JSONobject.animator.ptanimatorHeight;this.timelineViewHeight=JSONobject.animator.timelineViewHeight;this.timelinesWidth=JSONobject.animator.timelinesWidth;this.animationsWidth=JSONobject.animator.animationsWidth}}
poblateSettings(JSONobject){if(JSONobject==""){this.settingsObject=new Settings("false","false")}else{this.settingsObject=new Settings(JSONobject.animator.renderEnabled,JSONobject.animator.saveBuilderEnabled)}}
poblateFolders(JSONobject){if(JSONobject==""||JSONobject.animator.folders==""){var folder=new Folder({isActiveFolder:!0,id:1});this.folders.push(folder)}else{JSONobject.animator.folders.map((folder,index)=>{var folderJSON=folder.folder;var folderObject=new Folder({folderName:folderJSON.folderName,isActiveFolder:folderJSON.isActiveFolder,id:index+1});var folderTimelines=[];folderJSON.timelines.map((timeline,index)=>{var timelineJSON=timeline.timeline;var timelineObject=new Timeline({parentFolderObject:folderObject,timelineName:timelineJSON.timelineName,isActiveTimeline:timelineJSON.isActiveTimeline,id:index+1,container:timelineJSON.container,wrapper:timelineJSON.wrapper,routefrom:timelineJSON.routefrom,routeto:timelineJSON.routeto,delay:timelineJSON.delay,duration:timelineJSON.duration,widthPerSecond:timelineJSON.widthPerSecond,});var leftTimelineAnimations=[];timelineJSON.leftAnimations.map((animation,index)=>{var animationJSON=animation.animation;var animationObject=new Animation({parentTimelineObject:timelineObject,animationName:animationJSON.animationName,isActiveAnimation:animationJSON.isActiveAnimation,id:index+1,isleftorright:animationJSON.isleftorright,animWrapperSelector:animationJSON.animWrapperSelector,element:animationJSON.element,duration:animationJSON.duration,delay:animationJSON.delay,easing:animationJSON.easing,staggerEnabled:animationJSON.staggerEnabled,stagger:animationJSON.stagger,splitTextEnabled:animationJSON.splitTextEnabled,splitText:animationJSON.splitText,repeatEnabled:animationJSON.repeatEnabled,repeat:animationJSON.repeat,yoyoEnabled:animationJSON.yoyoEnabled,method:animationJSON.method,methodfromto:animationJSON.methodfromto,});const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];var getFromObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromObject[property]){obj[property]=animationJSON.fromObject[property]}
return obj},{});var fromObject=new methodProperties(getFromObjectValues);fromObject.parentTimelineObject=timelineObject;animationObject.fromObject=fromObject;var getToObjectValues=properties.reduce((obj,property)=>{if(animationJSON.toObject[property]){obj[property]=animationJSON.toObject[property]}
return obj},{});var toObject=new methodProperties(getToObjectValues);toObject.parentTimelineObject=timelineObject;animationObject.toObject=toObject;var getFromToFromObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromtofromObject[property]){obj[property]=animationJSON.fromtofromObject[property]}
return obj},{});var fromtofromObject=new methodProperties(getFromToFromObjectValues);fromtofromObject.parentTimelineObject=timelineObject;animationObject.fromtofromObject=fromtofromObject;var getFromToToObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromtotoObject[property]){obj[property]=animationJSON.fromtotoObject[property]}
return obj},{});var fromtotoObject=new methodProperties(getFromToToObjectValues);fromtotoObject.parentTimelineObject=timelineObject;animationObject.fromtotoObject=fromtotoObject;leftTimelineAnimations.push(animationObject)});timelineObject.leftAnimations=leftTimelineAnimations;var rightTimelineAnimations=[];timelineJSON.rightAnimations.map((animation,index)=>{var animationJSON=animation.animation;var animationObject=new Animation({parentTimelineObject:timelineObject,animationName:animationJSON.animationName,isActiveAnimation:animationJSON.isActiveAnimation,id:index+1,isleftorright:animationJSON.isleftorright,animWrapperSelector:animationJSON.animWrapperSelector,element:animationJSON.element,duration:animationJSON.duration,delay:animationJSON.delay,easing:animationJSON.easing,staggerEnabled:animationJSON.staggerEnabled,stagger:animationJSON.stagger,splitTextEnabled:animationJSON.splitTextEnabled,splitText:animationJSON.splitText,repeatEnabled:animationJSON.repeatEnabled,repeat:animationJSON.repeat,yoyoEnabled:animationJSON.yoyoEnabled,method:animationJSON.method,methodfromto:animationJSON.methodfromto,});const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];var getFromObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromObject[property]){obj[property]=animationJSON.fromObject[property]}
return obj},{});var fromObject=new methodProperties(getFromObjectValues);fromObject.parentTimelineObject=timelineObject;animationObject.fromObject=fromObject;var getToObjectValues=properties.reduce((obj,property)=>{if(animationJSON.toObject[property]){obj[property]=animationJSON.toObject[property]}
return obj},{});var toObject=new methodProperties(getToObjectValues);toObject.parentTimelineObject=timelineObject;animationObject.toObject=toObject;var getFromToFromObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromtofromObject[property]){obj[property]=animationJSON.fromtofromObject[property]}
return obj},{});var fromtofromObject=new methodProperties(getFromToFromObjectValues);fromtofromObject.parentTimelineObject=timelineObject;animationObject.fromtofromObject=fromtofromObject;var getFromToToObjectValues=properties.reduce((obj,property)=>{if(animationJSON.fromtotoObject[property]){obj[property]=animationJSON.fromtotoObject[property]}
return obj},{});var fromtotoObject=new methodProperties(getFromToToObjectValues);fromtotoObject.parentTimelineObject=timelineObject;animationObject.fromtotoObject=fromtotoObject;rightTimelineAnimations.push(animationObject)});timelineObject.rightAnimations=rightTimelineAnimations;folderTimelines.push(timelineObject)});folderObject.timelines=folderTimelines;this.folders.push(folderObject)})}}}
class pageTransitions{ptanimatorHeight;timelineViewHeight;timelinesWidth;animationsWidth;settingsObject;saveObject;folders=[];constructor({toggleButton,settingsObject,folders,ptanimatorHeight,timelineViewHeight,timelinesWidth,animationsWidth}){this.settingsObject=settingsObject;this.saveObject=new Save(this);this.folders=folders;this.ptanimatorHeight=ptanimatorHeight||"600";this.timelineViewHeight=timelineViewHeight;this.timelinesWidth=timelinesWidth;this.animationsWidth=animationsWidth;this.ptanimatorDrawerHTML();this.ptanimatorItemsDimensions(this.ptanimatorHeight,this.timelineViewHeight,this.timelinesWidth,this.animationsWidth);this.ptanimatorDrawerJS(toggleButton);this.ptanimatorResizables();this.setTimelineOverflow();this.updateDrawerHasActiveTimeline();this.dropdownFolders();this.dropdownLeftAnimations();this.dropdownRightAnimations();this.initFoldersNameUpdate(this);this.setActiveFolder(this);this.newFolderButton(this);this.initTimelinesNameUpdate(this);this.setActiveTimeline(this);this.newTimelineButton(this);this.initLeftAnimationsNameUpdate(this);this.setActiveLeftAnimation(this);this.newLeftAnimationButton(this);this.initRightAnimationsNameUpdate(this);this.setActiveRightAnimation(this);this.newRightAnimationButton(this);this.watchBuilderChangesAndReloadTimelines(this)}
ptanimatorDrawerHTML(){var animatorDisplay=`
            <div class="nb-ptanimator__drawer" data-open="false">
                <div class="nb-ptanimator__drag"></div>
    
                <div class="nb-ptanimator__top-wrapper">
                    <div class="nb-ptanimator__pagetransitions-title-wrapper">
                            <svg class="nb-ptanimator__pagetransitions-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="103" height="102" viewBox="0 0 103 102" fill="none">
                                <rect x="0.947693" width="102" height="102" rx="51" fill="url(#pattern0_1926_124)"/>
                                <defs>
                                <pattern id="pattern0_1926_124" patternContentUnits="objectBoundingBox" width="1" height="1">
                                <use xlink:href="#image0_1926_124" transform="translate(0 -0.00574713) scale(0.0114943)"/>
                                </pattern>
                                <image id="image0_1926_124" width="87" height="88" xlink:href="data:image/png;base64, "/>
                                </defs>
                            </svg>
                        <div class="nb-ptanimator__pagetransitions-title">Page Transitions</div>
                    </div>
                    <div class="nb-ptanimator__pagetransitions-settings-save">
                        <div class="nb-ptanimator__pagetransitions-settings">
                            <div class="nb-ptanimator__pagetransitions-settings-dot"></div>
                            <div class="nb-ptanimator__pagetransitions-settings-dot"></div>
                            <div class="nb-ptanimator__pagetransitions-settings-dot"></div>
    
                            ${
                                //Display settings
                                this.settingsObject.settingsHTML()
                            }
                        </div>
                        ${
                            //Display save
                            this.saveObject.saveButtonHTML()
                        }
                    </div>
                </div>
                <div class="nb-ptanimator__middle-bottom-wrapper">
                    <div class="nb-ptanimator__middle-wrapper">
                        <div class="nb-ptanimator__folders-wrapper">
                            <div class="nb-ptanimator__folder-active-preview">
                                <span class="nb-ptanimator__folder-active-preview-span" spellcheck="false">
                                ${
                                    //Set initial active folder at preview
                                    this.folders
                                        .map(function (folder) {
                                            if (folder.isActiveFolder) {
                                                return folder.folderName;
                                            }
                                        })
                                        .join("")
                                }
                                </span>
                            </div>
                            <div class="nb-ptanimator__folders" data-open="false">
                                ${
                                    //Set all folders at dropdown
                                    this.folders
                                        .map(function (folder) {
                                            return folder.folderButtonHTML();
                                        })
                                        .join("")
                                }
                                <div class="nb-ptanimator__new-folder">New folder</div>
                            </div>
                            <div class="nb-ptanimator__folder-timelines">
                                ${
                                    //Display timelines collection from initial active folder
                                    this.folders
                                        .map(function (folder) {
                                            if (folder.isActiveFolder) {
                                                return (
                                                    folder.timelines
                                                        .map(function (timeline) {
                                                            return timeline.timelineButtonHTML();
                                                        })
                                                        .join("") + folder.newTimelineButtonHTML()
                                                );
                                            }
                                        })
                                        .join("")
                                }
                            </div>
                        </div>
    
    
    
    
    
                        ${
                            //Timelines and Animations panels start here
                            ""
                        }
                        <div class="nb-ptanimator__timelines-wrapper">
                            <div class="nb-ptanimator__resizer-x">
                                <div class="nb-ptanimator__resizer-x-handle">
                                    <div class="nb-ptanimator__resizer-dots">
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                    </div>
                                    <div class="nb-ptanimator__resizer-dots">
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                        <div class="nb-ptanimator__resizer-dot"></div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator__pt-and-animations-wrapper">
                                <div class="nb-ptanimator__page-transitions-area">
                                ${
                                    //Display timeline panel from initial active timeline (from initial active folder)
                                    this.folders
                                        .map(function (folder) {
                                            if (folder.isActiveFolder) {
                                                return folder.timelines
                                                    .map(function (timeline) {
                                                        if (timeline.isActiveTimeline) {
                                                            return timeline.timelinePanelHTML();
                                                        }
                                                    })
                                                    .join("");
                                            }
                                        })
                                        .join("")
                                }
                                </div>
    
                                <div class="nb-ptanimator__page-transitions-animations-wrapper">
                                    ${
                                        //Display enter animations (left)
                                        ""
                                    }
                                    <div class="nb-ptanimator__left-anim-wrapper">
                                        <div class="nb-ptanimator-panel__animation-title-active-preview-wrapper">
                                            <div class="nb-ptanimator-panel__animation-title" spellcheck="false">
                                                ${
                                                    //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATION PANEL NAME
                                                    this.folders
                                                        .map(function (folder) {
                                                            if (folder.isActiveFolder) {
                                                                return folder.timelines
                                                                    .map(function (timeline) {
                                                                        if (timeline.isActiveTimeline) {
                                                                            return timeline.leftAnimations
                                                                                .map(function (animation) {
                                                                                    if (animation.isActiveAnimation) {
                                                                                        return animation.animationName;
                                                                                    }
                                                                                })
                                                                                .join("");
                                                                        }
                                                                    })
                                                                    .join("");
                                                            }
                                                        })
                                                        .join("")
                                                }
                                            </div>
                                            <div class="nb-ptanimator-panel__animation-active-preview-wrapper">
                                                <div class="nb-ptanimator-panel__animation-active-preview">
                                                    <span class="nb-ptanimator-panel__animation-active-preview-span">
                                                        ${
                                                            //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION PREVIEW NAME
                                                            this.folders
                                                                .map(function (folder) {
                                                                    if (folder.isActiveFolder) {
                                                                        return folder.timelines
                                                                            .map(function (timeline) {
                                                                                if (timeline.isActiveTimeline) {
                                                                                    return timeline.leftAnimations
                                                                                        .map(function (animation) {
                                                                                            if (animation.isActiveAnimation) {
                                                                                                return animation.animationName;
                                                                                            }
                                                                                        })
                                                                                        .join("");
                                                                                }
                                                                            })
                                                                            .join("");
                                                                    }
                                                                })
                                                                .join("")
                                                        }
                                                    </span>
                                                </div>
                                                <div class="nb-ptanimator-panel__timeline-animations" data-open="false">
                                                    ${
                                                        //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION
                                                        this.folders
                                                            .map(function (folder) {
                                                                if (folder.isActiveFolder) {
                                                                    return folder.timelines
                                                                        .map(function (timeline) {
                                                                            if (timeline.isActiveTimeline) {
                                                                                return (
                                                                                    timeline.leftAnimations
                                                                                        .map(function (animation) {
                                                                                            return animation.animationButtonHTML();
                                                                                        })
                                                                                        .join("") + timeline.newAnimationButtonHTML()
                                                                                );
                                                                            }
                                                                        })
                                                                        .join("");
                                                                }
                                                            })
                                                            .join("")
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nb-ptanimator-panel__animation-inner-wrapper">
                                            ${
                                                //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION
                                                this.folders
                                                    .map(function (folder) {
                                                        if (folder.isActiveFolder) {
                                                            return folder.timelines
                                                                .map(function (timeline) {
                                                                    if (timeline.isActiveTimeline) {
                                                                        return timeline.leftAnimations
                                                                            .map(function (animation) {
                                                                                if (animation.isActiveAnimation) {
                                                                                    return animation.animationPanelHTML();
                                                                                }
                                                                            })
                                                                            .join("");
                                                                    }
                                                                })
                                                                .join("");
                                                        }
                                                    })
                                                    .join("")
                                            }
                                        </div>
                                        <div class="nb-ptanimator__select-timeline-view-switch">
                                            <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                                            <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
                                        </div>
                                    </div>
                                    ${
                                        //Display leave animations (right)
                                        ""
                                    }
                                    <div class="nb-ptanimator__right-anim-wrapper">
                                        <div class="nb-ptanimator__resizer-x">
                                            <div class="nb-ptanimator__resizer-x-handle">
                                                <div class="nb-ptanimator__resizer-dots">
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                </div>
                                                <div class="nb-ptanimator__resizer-dots">
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                    <div class="nb-ptanimator__resizer-dot"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nb-ptanimator-panel__animation-title-active-preview-wrapper">
                                            <div class="nb-ptanimator-panel__animation-title" spellcheck="false">
                                                ${
                                                    //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATION PANEL NAME
                                                    this.folders
                                                        .map(function (folder) {
                                                            if (folder.isActiveFolder) {
                                                                return folder.timelines
                                                                    .map(function (timeline) {
                                                                        if (timeline.isActiveTimeline) {
                                                                            return timeline.rightAnimations
                                                                                .map(function (animation) {
                                                                                    if (animation.isActiveAnimation) {
                                                                                        return animation.animationName;
                                                                                    }
                                                                                })
                                                                                .join("");
                                                                        }
                                                                    })
                                                                    .join("");
                                                            }
                                                        })
                                                        .join("")
                                                }
                                            </div>
                                            <div class="nb-ptanimator-panel__animation-active-preview-wrapper">
                                                <div class="nb-ptanimator-panel__animation-active-preview">
                                                    <span class="nb-ptanimator-panel__animation-active-preview-span">
                                                        ${
                                                            //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION PREVIEW NAME
                                                            this.folders
                                                                .map(function (folder) {
                                                                    if (folder.isActiveFolder) {
                                                                        return folder.timelines
                                                                            .map(function (timeline) {
                                                                                if (timeline.isActiveTimeline) {
                                                                                    return timeline.rightAnimations
                                                                                        .map(function (animation) {
                                                                                            if (animation.isActiveAnimation) {
                                                                                                return animation.animationName;
                                                                                            }
                                                                                        })
                                                                                        .join("");
                                                                                }
                                                                            })
                                                                            .join("");
                                                                    }
                                                                })
                                                                .join("")
                                                        }
                                                    </span>
                                                </div>
                                                <div class="nb-ptanimator-panel__timeline-animations" data-open="false">
                                                    ${
                                                        //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION
                                                        this.folders
                                                            .map(function (folder) {
                                                                if (folder.isActiveFolder) {
                                                                    return folder.timelines
                                                                        .map(function (timeline) {
                                                                            if (timeline.isActiveTimeline) {
                                                                                return (
                                                                                    timeline.rightAnimations
                                                                                        .map(function (animation) {
                                                                                            return animation.animationButtonHTML();
                                                                                        })
                                                                                        .join("") + timeline.newAnimationButtonHTML()
                                                                                );
                                                                            }
                                                                        })
                                                                        .join("");
                                                                }
                                                            })
                                                            .join("")
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nb-ptanimator-panel__animation-inner-wrapper">
                                            ${
                                                //Display animation panel from initial active animation (from initial active timeline from initial active folder) - ANIMATIONS COLLECTION
                                                this.folders
                                                    .map(function (folder) {
                                                        if (folder.isActiveFolder) {
                                                            return folder.timelines
                                                                .map(function (timeline) {
                                                                    if (timeline.isActiveTimeline) {
                                                                        return timeline.rightAnimations
                                                                            .map(function (animation) {
                                                                                if (animation.isActiveAnimation) {
                                                                                    return animation.animationPanelHTML();
                                                                                }
                                                                            })
                                                                            .join("");
                                                                    }
                                                                })
                                                                .join("");
                                                        }
                                                    })
                                                    .join("")
                                            }
                                        </div>
                                        <div class="nb-ptanimator__select-timeline-view-switch">
                                            <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                                            <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nb-ptanimator__bottom-wrapper">
                        <div class="nb-ptanimator__resizer-y">
                            <div class="nb-ptanimator__resizer-y-handle">
                                <div class="nb-ptanimator__resizer-dots">
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                </div>
                                <div class="nb-ptanimator__resizer-dots">
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                    <div class="nb-ptanimator__resizer-dot"></div>
                                </div>
                            </div>
                        </div>
                        <div class="nb-ptanimator__timeline-view">
                        </div>
                        <div class="nb-ptanimator__select-timeline-view">
                            <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                            <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class='nb-pt-selector-cursor'></div>
            `;document.querySelector(".nb-ptanimator").innerHTML=animatorDisplay;this.settingsObject.initOptions();this.saveObject.initOptions();this.folders.forEach(function(folder){if(folder.isActiveFolder){folder.timelines.forEach(function(timeline){if(timeline.isActiveTimeline){timeline.initOptions();timeline.leftAnimations.forEach(function(animation){if(animation.isActiveAnimation){animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}});timeline.rightAnimations.forEach(function(animation){if(animation.isActiveAnimation){animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}})}else{timeline.clearGSAPtimelineStyles(timeline)}})}else{folder.timelines.map(function(timeline){timeline.clearGSAPtimelineStyles(timeline)}).join("")}})}
ptanimatorItemsDimensions(ptanimatorHeight,timelineViewHeight,timelinesWidth,animationsWidth){var ptanimator__drawer=document.querySelector(".nb-ptanimator__drawer");var ptanimator__middle_wrapper=document.querySelector(".nb-ptanimator__middle-wrapper");var ptanimator__folders_wrapper=document.querySelector(".nb-ptanimator__folders-wrapper");var ptanimator__timeline_wrapper=document.querySelector(".nb-ptanimator__left-anim-wrapper");if(ptanimatorHeight!==""){ptanimator__drawer.style.height=ptanimatorHeight+"px"}else{var h=Math.round(parseInt(getComputedStyle(ptanimator__drawer).height));ptanimator__drawer.style.height=`${h}px`}
if(timelineViewHeight!==""){ptanimator__middle_wrapper.style.flex=`0 ${timelineViewHeight}px`}else{var h=Math.round(parseInt(getComputedStyle(ptanimator__middle_wrapper).height));ptanimator__middle_wrapper.style.flex=`0 ${h}px`}
if(timelinesWidth!==""){ptanimator__folders_wrapper.style.flex=`0 ${timelinesWidth}px`}else{var w=Math.round(parseInt(getComputedStyle(ptanimator__folders_wrapper).width));ptanimator__folders_wrapper.style.flex=`0 ${w}px`}
if(animationsWidth!==""){ptanimator__timeline_wrapper.style.flex=`0 ${animationsWidth}px`}else{var w=Math.round(parseInt(getComputedStyle(ptanimator__timeline_wrapper).width));ptanimator__timeline_wrapper.style.flex=`0 ${w}px`}}
ptanimatorDrawerJS(toggleButton){var iframeElement=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var nb_pageTransitions=document.querySelector(".nb-ptanimator");var drawer=document.querySelector(".nb-ptanimator__drawer");var drawerTopWrapper=document.querySelector(".nb-ptanimator__top-wrapper");var isDragging=!1;var startY;var dragged=!1;toggleDrawer();toggleButton.addEventListener("click",function(){toggleDrawer()});document.addEventListener("keydown",function(event){if(event.ctrlKey&&event.shiftKey&&event.key===PageTransitionsShortcut.shortcut){toggleDrawer()}});document.addEventListener("keydown",function(event){if(event.key==="Escape"&&drawer.getAttribute("data-open")==="true"){toggleDrawer()}});document.addEventListener("keydown",function(event){if(event.key==="Escape"&&drawer.getAttribute("data-open")==="true"){toggleDrawer()}});function toggleDrawer(){drawer.dataset.open=drawer.dataset.open==="true"?"false":"true";if(drawer.getAttribute("data-open")==="true"){drawer.style.transform="translateY(0%)"}}
nb_pageTransitions.addEventListener("mousedown",function(e){if(e.target!==drawerTopWrapper){return}
isDragging=!0;startY=e.clientY;if(isDragging){document.addEventListener("mousemove",function(e){if(isDragging){var deltaY=e.clientY-startY;var deltaHeight=deltaY;if(deltaHeight>0){drawer.style.transform="translateY("+deltaHeight+"px)";dragged=!0}}});document.addEventListener("mouseup",function(e){isDragging=!1;if(dragged){toggleDrawer();dragged=!1}});iframeElement.addEventListener("mouseup",function(e){isDragging=!1;if(dragged){toggleDrawer();dragged=!1}})}})}
ptanimatorResizables(){var iframeElement=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var self=this;var resizerDrawer=document.querySelector(".nb-ptanimator__drag");initResizerDrawer(resizerDrawer);function initResizerDrawer(resizer){resizer.addEventListener("mousedown",onmousedown);var t=resizer.parentElement;function onmousedown(e){e.preventDefault();resizer.classList.add("nb-ptanimator__drag--active");document.addEventListener("mousemove",onmousemove);document.addEventListener("mouseup",onmouseup);iframeElement.addEventListener("mouseup",onmouseup)}
function onmousemove(e){e.preventDefault();var clientY=e.clientY;var deltaY=clientY-(resizer._clientY||clientY);resizer._clientY=clientY;var t=resizer.parentElement;var h=Math.round(parseInt(getComputedStyle(t).height)-deltaY);self.ptanimatorHeight=h;t.style.height=`${h}px`;self.setTimelineOverflow()}
function onmouseup(e){e.preventDefault();resizer.classList.remove("nb-ptanimator__drag--active");document.removeEventListener("mousemove",onmousemove);document.removeEventListener("mouseup",onmouseup);delete e._clientY;delete resizer._clientY}}
var resizersX=document.querySelectorAll(".nb-ptanimator__resizer-x");resizersX.forEach(function(resizer){resizer.children[0].addEventListener("mousedown",onmousedown);var l=resizer.parentElement.previousElementSibling;var r=resizer.parentElement;r.style.flex="1 0";function onmousedown(e){e.preventDefault();document.addEventListener("mousemove",onmousemove);document.addEventListener("mouseup",onmouseup);iframeElement.addEventListener("mouseup",onmouseup)}
function onmousemove(e){e.preventDefault();var clientX=e.pageX;var deltaX=clientX-(resizer._clientX||clientX);resizer._clientX=clientX;var l=resizer.parentElement.previousElementSibling;var r=resizer.parentElement;var w=Math.round(parseInt(getComputedStyle(l).width)+deltaX);if(resizer.parentElement.classList.contains("nb-ptanimator__timelines-wrapper")){self.timelinesWidth=parseInt(getComputedStyle(l).width)}
if(resizer.parentElement.classList.contains("nb-ptanimator__right-anim-wrapper")){self.animationsWidth=parseInt(getComputedStyle(l).width)}
l.style.flex=`0 ${w}px`;r.style.flex="1 0";self.setTimelineOverflow()}
function onmouseup(e){e.preventDefault();document.removeEventListener("mousemove",onmousemove);document.removeEventListener("mouseup",onmouseup);delete e._clientX;delete resizer._clientX}});var resizersY=document.querySelectorAll(".nb-ptanimator__resizer-y");resizersY.forEach(function(resizer){resizer.children[0].addEventListener("mousedown",onmousedown);var t=resizer.parentElement.previousElementSibling;var b=resizer.parentElement;b.style.flex="1 0";function onmousedown(e){e.preventDefault();document.addEventListener("mousemove",onmousemove);document.addEventListener("mouseup",onmouseup);iframeElement.addEventListener("mouseup",onmouseup)}
function onmousemove(e){e.preventDefault();var clientY=e.clientY;var deltaY=clientY-(resizer._clientY||clientY);resizer._clientY=clientY;var h=Math.round(parseInt(getComputedStyle(t).height)+deltaY);if(resizer.parentElement.classList.contains("nb-ptanimator__bottom-wrapper")){self.timelineViewHeight=parseInt(getComputedStyle(t).height)}
t.style.flex=`0 ${h}px`;b.style.flex="1 0";self.setTimelineOverflow()}
function onmouseup(e){e.preventDefault();document.removeEventListener("mousemove",onmousemove);document.removeEventListener("mouseup",onmouseup);delete e._clientY;delete resizer._clientY}})}
setTimelineOverflow(){if(document.querySelector(".nb-ptanimator__drawer")&&document.querySelector(".nb-ptanimator__top-wrapper")&&document.querySelector(".nb-ptanimator__middle-wrapper")&&document.querySelector(".nb-ptanimator-timeline-view__top-wrapper")&&document.querySelector(".nb-ptanimator-timeline-view__time-markers")&&document.querySelector(".nb-ptanimator__resizer-y")&&document.querySelector(".nb-ptanimator-timeline-view__scrolling-timelines")){var animator=document.querySelector(".nb-ptanimator__drawer").offsetHeight;var animatorTop=document.querySelector(".nb-ptanimator__top-wrapper").offsetHeight;var animatorMiddle=document.querySelector(".nb-ptanimator__middle-wrapper").offsetHeight;var resizerY=document.querySelector(".nb-ptanimator__resizer-y").offsetHeight;var timelineControls=document.querySelector(".nb-ptanimator-timeline-view__top-wrapper").offsetHeight;var markers=document.querySelector(".nb-ptanimator-timeline-view__time-markers").offsetHeight+parseFloat(window.getComputedStyle(document.querySelector(".nb-ptanimator-timeline-view__time-markers")).marginTop);var availableBottomHeight=parseFloat(animator)-parseFloat(animatorTop)-parseFloat(animatorMiddle);var bottomItemsHeight=parseFloat(resizerY)+parseFloat(timelineControls)+parseFloat(markers);var availableTimelinesHeight=parseFloat(availableBottomHeight)-parseFloat(bottomItemsHeight);var timelineHeight=document.querySelector(".nb-ptanimator-timeline-view__scrolling-timelines");timelineHeight.style.maxHeight=`${availableTimelinesHeight - 4}px`}}
updateDrawerHasActiveTimeline(){if(document.querySelector('.nb-ptanimator__drawer [data-active-timeline="true"]')){document.querySelector(".nb-ptanimator__drawer").setAttribute("data-has-active-timeline","true")}else{document.querySelector(".nb-ptanimator__drawer").setAttribute("data-has-active-timeline","false")}}
dropdownFolders(){var folderActivePreview=document.querySelector(".nb-ptanimator__folder-active-preview");var dropdownFolders=document.querySelector(".nb-ptanimator__folders");var folderActivePreviewSpan=document.querySelector(".nb-ptanimator__folder-active-preview-span");if(folderActivePreview){folderActivePreview.addEventListener("click",function(event){if(event.target===folderActivePreviewSpan){return}
event.stopImmediatePropagation();if(dropdownFolders.getAttribute("data-open")==="true"){dropdownFolders.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}else{dropdownFolders.setAttribute("data-open","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!dropdownFolders.contains(event.target)){dropdownFolders.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}}}}
dropdownLeftAnimations(){var animationActivePreview=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-active-preview");var dropdownAnimations=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__timeline-animations");if(animationActivePreview){animationActivePreview.addEventListener("click",function(event){event.stopImmediatePropagation();if(dropdownAnimations.getAttribute("data-open")==="true"){dropdownAnimations.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}else{dropdownAnimations.setAttribute("data-open","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!dropdownAnimations.contains(event.target)){dropdownAnimations.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}}}}
dropdownRightAnimations(){var animationActivePreview=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-active-preview");var dropdownAnimations=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__timeline-animations");if(animationActivePreview){animationActivePreview.addEventListener("click",function(event){event.stopImmediatePropagation();if(dropdownAnimations.getAttribute("data-open")==="true"){dropdownAnimations.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}else{dropdownAnimations.setAttribute("data-open","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!dropdownAnimations.contains(event.target)){dropdownAnimations.setAttribute("data-open","false");document.removeEventListener("click",closeDropdown)}}}}
initFoldersNameUpdate(self){self.folders.map(function(folderObject){document.querySelector(`.nb-ptanimator__folder-update-name[data-folder-id="${folderObject.id}"]`).addEventListener("click",function(e){var folderPreview=document.querySelector(".nb-ptanimator__folder-active-preview-span");e.stopImmediatePropagation();e.preventDefault();var folders=document.querySelectorAll(".nb-ptanimator__folder");folders.forEach(function(folder){if(folder.getAttribute("data-folder-id")==folderObject.id){var folderSpan=document.querySelector(`.nb-ptanimator__folder[data-folder-id=${CSS.escape(String(folderObject.id))}] span`);folderSpan.contentEditable=!0;folderSpan.focus();var range,selection;if(window.getSelection&&document.createRange){selection=window.getSelection();range=document.createRange();range.selectNodeContents(folderSpan);selection.removeAllRanges();selection.addRange(range)}else if(document.selection&&document.body.createTextRange){range=document.body.createTextRange();range.moveToElementText(folderSpan);range.select()}
folderSpan.addEventListener("input",function(){const newName=folderSpan.textContent.trim();if(folderObject.isActiveFolder){folderPreview.firstChild.textContent=newName}});folderSpan.addEventListener("blur",function(){const newName=folderSpan.textContent.trim();folderObject.folderName=newName;folderSpan.contentEditable=!1});folderSpan.addEventListener("keydown",function(event){if(event.key==="Enter"){event.preventDefault();folderSpan.blur()}})}})})}).join("")}
setActiveFolder(self){var folders=document.querySelectorAll(".nb-ptanimator__folder");var dropdownFolders=document.querySelector(".nb-ptanimator__folders");folders.forEach(function(folder){var deleteFolder=folder.querySelector(".nb-ptanimator__delete-folder");self.deleteFolderButton(self,deleteFolder);var folderIconUpdateName=folder.querySelector(`.nb-ptanimator__folder-update-name`);folder.addEventListener("click",function(e){e.stopImmediatePropagation();if(e.target===folderIconUpdateName||folderIconUpdateName.contains(e.target)){return}
self.setFolderUI(self,folder);dropdownFolders.setAttribute("data-open","false")})})}
newFolderButton(self){var newFolderButton=document.querySelector(".nb-ptanimator__new-folder");newFolderButton.addEventListener("click",function(e){e.stopImmediatePropagation();var newFolderObject=new Folder({id:self.folders.length+1});self.folders.push(newFolderObject);var newFolderElement=document.createElement("div");newFolderElement.className="nb-ptanimator__folder";newFolderElement.setAttribute("data-active-folder",newFolderObject.isActiveFolder);newFolderElement.setAttribute("data-folder-id",newFolderObject.id);newFolderElement.innerHTML=`<span>${newFolderObject.folderName}</span>`;var editSvgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");editSvgElement.setAttribute("class","nb-ptanimator__folder-update-name");editSvgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");editSvgElement.setAttribute("viewBox","0 0 576 512");editSvgElement.setAttribute("data-folder-id",newFolderObject.id);var editPath=document.createElementNS("http://www.w3.org/2000/svg","path");editPath.setAttribute("d","M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z");editSvgElement.appendChild(editPath);var svgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");svgElement.setAttribute("class","nb-ptanimator__delete-folder");svgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");svgElement.setAttribute("viewBox","0 0 512 512");svgElement.setAttribute("data-folder-id",newFolderObject.id);var path1=document.createElementNS("http://www.w3.org/2000/svg","path");path1.setAttribute("d","M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144");path1.setAttribute("fill","none");path1.setAttribute("stroke","currentColor");path1.setAttribute("stroke-linecap","round");path1.setAttribute("stroke-linejoin","round");path1.setAttribute("stroke-width","32");var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");rect.setAttribute("x","32");rect.setAttribute("y","64");rect.setAttribute("width","448");rect.setAttribute("height","80");rect.setAttribute("rx","16");rect.setAttribute("ry","16");rect.setAttribute("fill","none");rect.setAttribute("stroke","currentColor");rect.setAttribute("stroke-linecap","round");rect.setAttribute("stroke-linejoin","round");rect.setAttribute("stroke-width","32");var path2=document.createElementNS("http://www.w3.org/2000/svg","path");path2.setAttribute("d","M312 240L200 352M312 352L200 240");path2.setAttribute("fill","none");path2.setAttribute("stroke","currentColor");path2.setAttribute("stroke-linecap","round");path2.setAttribute("stroke-linejoin","round");path2.setAttribute("stroke-width","32");svgElement.appendChild(path1);svgElement.appendChild(rect);svgElement.appendChild(path2);newFolderElement.appendChild(editSvgElement);newFolderElement.appendChild(svgElement);newFolderButton.before(newFolderElement);self.setActiveFolder(self);self.initFoldersNameUpdate(self)})}
deleteFolderButton(self,deleteFolder){deleteFolder.addEventListener("click",function(e){e.stopImmediatePropagation();var deleteId=deleteFolder.getAttribute("data-folder-id");var wasActiveFolderDeleted=!1;self.folders.map(function(folder){if(folder.id==deleteId){self.folders=self.folders.filter((t)=>t!==folder);if(folder.isActiveFolder){wasActiveFolderDeleted=!0}}}).join("");var folderElement=document.querySelector(`.nb-ptanimator__folder[data-folder-id="${deleteId}"]`);if(folderElement){folderElement.remove()}
self.folders.forEach(function(folder,index){folder.id=index+1});var folderElements=document.querySelectorAll(`.nb-ptanimator__folder`);folderElements.forEach(function(folderElement,index){var removeButton=folderElement.querySelector(".nb-ptanimator__delete-folder");folderElement.setAttribute("data-folder-id",index+1);removeButton.setAttribute("data-folder-id",index+1)});if(self.folders.length>0&&wasActiveFolderDeleted){self.setFolderUI(self,document.querySelector(".nb-ptanimator__folder"))}else if(self.folders.length==0){self.setFolderUI(self)}})}
setFolderUI(self,folderSelected){var folders=document.querySelectorAll(".nb-ptanimator__folder");var folderActivePreview=document.querySelector(".nb-ptanimator__folder-active-preview-span");var timelines=document.querySelector(".nb-ptanimator__folder-timelines");var timelineWrapper=document.querySelector(".nb-ptanimator__page-transitions-area");var timelineObject;var leftanimationTitleActivePreview=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-title-active-preview-wrapper");leftanimationTitleActivePreview.style.display="flex";var leftanimationActivePreview=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-active-preview-span");var leftanimationTitle=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-title");var leftanimationCollection=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__timeline-animations");var leftanimationInnerWrapper=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-inner-wrapper");var rightanimationTitleActivePreview=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-title-active-preview-wrapper");rightanimationTitleActivePreview.style.display="flex";var rightanimationActivePreview=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-active-preview-span");var rightanimationTitle=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-title");var rightanimationCollection=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__timeline-animations");var rightanimationInnerWrapper=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-inner-wrapper");if(self.folders.length==0){folderActivePreview.innerHTML="";timelines.innerHTML="";timelineWrapper.innerHTML=`
                <div class="nb-ptanimator__select-timeline-view-switch">
                    <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                    <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
                </div>`;leftanimationActivePreview.innerHTML="";leftanimationTitle.innerHTML="";leftanimationInnerWrapper.innerHTML="";leftanimationCollection.innerHTML="";leftanimationTitleActivePreview.style.display="none";rightanimationActivePreview.innerHTML="";rightanimationTitle.innerHTML="";rightanimationInnerWrapper.innerHTML="";rightanimationCollection.innerHTML="";rightanimationTitleActivePreview.style.display="none";return}
folderSelected.setAttribute("data-active-folder","true");folders.forEach(function(folder){if(folderSelected!=folder){folder.setAttribute("data-active-folder","false")}});var folderActiveID=folderSelected.getAttribute("data-folder-id");self.folders.map(function(folder){if(folder.id==folderActiveID){folder.isActiveFolder=!0}else{folder.isActiveFolder=!1}}).join("");self.folders.map(function(folder){if(folder.isActiveFolder){folderActivePreview.innerHTML=folder.folderName;timelines.innerHTML="";timelineWrapper.innerHTML=`
                    <div class="nb-ptanimator__select-timeline-view-switch">
                        <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                        <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
                    </div>`;leftanimationActivePreview.innerHTML="";leftanimationTitle.innerHTML="";leftanimationInnerWrapper.innerHTML="";leftanimationCollection.innerHTML="";rightanimationActivePreview.innerHTML="";rightanimationTitle.innerHTML="";rightanimationInnerWrapper.innerHTML="";rightanimationCollection.innerHTML="";folder.timelines.map(function(timeline){timelines.innerHTML+=timeline.timelineButtonHTML();if(timeline.isActiveTimeline){timelineWrapper.innerHTML+=timeline.timelinePanelHTML();timeline.initOptions();timelineObject=timeline;timeline.leftAnimations.map(function(animation){leftanimationCollection.innerHTML+=animation.animationButtonHTML();if(animation.isActiveAnimation){leftanimationActivePreview.innerHTML=animation.animationName;leftanimationTitle.innerHTML=animation.animationName;leftanimationInnerWrapper.innerHTML="";leftanimationInnerWrapper.innerHTML+=animation.animationPanelHTML();animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}}).join("");timeline.rightAnimations.map(function(animation){rightanimationCollection.innerHTML+=animation.animationButtonHTML();if(animation.isActiveAnimation){rightanimationActivePreview.innerHTML=animation.animationName;rightanimationTitle.innerHTML=animation.animationName;rightanimationInnerWrapper.innerHTML="";rightanimationInnerWrapper.innerHTML+=animation.animationPanelHTML();animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}}).join("")}else{timeline.clearGSAPtimelineStyles(timeline)}}).join("");timelines.innerHTML+=folder.newTimelineButtonHTML();if(timelineObject){leftanimationCollection.innerHTML+=timelineObject.newAnimationButtonHTML();rightanimationCollection.innerHTML+=timelineObject.newAnimationButtonHTML()}else{leftanimationTitleActivePreview.style.display="none";rightanimationTitleActivePreview.style.display="none"}}else{folder.timelines.map(function(timeline){timeline.clearGSAPtimelineStyles(timeline)}).join("")}}).join("");self.setActiveTimeline(self);self.newTimelineButton(self);self.initFoldersNameUpdate(self);self.initTimelinesNameUpdate(self);if(timelineObject){self.setActiveLeftAnimation(self);self.newLeftAnimationButton(self);self.initLeftAnimationsNameUpdate(self);self.setActiveRightAnimation(self);self.newRightAnimationButton(self);self.initRightAnimationsNameUpdate(self)}}
initTimelinesNameUpdate(self){self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){timeline.updateTimelineName(timeline)}).join("")}}).join("")}
setActiveTimeline(self){var timelines=document.querySelectorAll(".nb-ptanimator__folder-timeline");timelines.forEach(function(timeline){var deleteTimeline=timeline.querySelector(".nb-ptanimator__delete-timeline");self.deleteTimelineButton(self,deleteTimeline);var timelineIconUpdateName=timeline.querySelector(`.nb-ptanimator__timeline-update-name`);timeline.addEventListener("click",function(e){e.stopImmediatePropagation();if(e.target===timelineIconUpdateName||timelineIconUpdateName.contains(e.target)){return}
self.setTimelineUI(self,timeline);var animationCollection=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__timeline-animations");animationCollection.innerHTML="";self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.leftAnimations.map(function(animation){animationCollection.innerHTML+=animation.animationButtonHTML()}).join("")}}).join("")}}).join("");var animations=document.querySelectorAll(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation");animations.forEach(function(animation){if(animation.getAttribute("data-active-animation")=="true"){self.setLeftAnimationUI(self,animation)}});if(animations.length==0){self.setLeftAnimationUI(self)}
var animationCollection=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__timeline-animations");animationCollection.innerHTML="";self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.rightAnimations.map(function(animation){animationCollection.innerHTML+=animation.animationButtonHTML()}).join("")}}).join("")}}).join("");var animations=document.querySelectorAll(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation");animations.forEach(function(animation){if(animation.getAttribute("data-active-animation")=="true"){self.setRightAnimationUI(self,animation)}});if(animations.length==0){self.setRightAnimationUI(self)}})});self.updateDrawerHasActiveTimeline()}
newTimelineButton(self){var newTimelineButton=document.querySelector(".nb-ptanimator__folder-new-timeline");if(newTimelineButton){newTimelineButton.addEventListener("click",function(e){e.stopImmediatePropagation();self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.push(new Timeline({parentFolderObject:this,id:folder.timelines.length+1}));var folderElement=document.querySelector(`[data-folder-id="${folder.id}"]`);self.setFolderUI(self,folderElement)}}).join("")})}}
deleteTimelineButton(self,deleteTimeline){deleteTimeline.addEventListener("click",function(e){e.stopImmediatePropagation();var deleteId=deleteTimeline.getAttribute("data-timeline-id");self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.id==deleteId){folder.timelines=folder.timelines.filter((t)=>t!==timeline);var folderElement=document.querySelector(`[data-folder-id="${folder.id}"]`);self.setFolderUI(self,folderElement)}}).join("")}}).join("");self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.forEach(function(timeline,index){timeline.id=index+1});var timelineElements=document.querySelectorAll(`.nb-ptanimator__folder-timeline`);timelineElements.forEach(function(timelineElement,index){var removeButton=timelineElement.querySelector(".nb-ptanimator__delete-timeline");timelineElement.setAttribute("data-timeline-id",index+1);removeButton.setAttribute("data-timeline-id",index+1)})}}).join("")})}
setTimelineUI(self,timelineSelected){var timelines=document.querySelectorAll(".nb-ptanimator__folder-timeline");var timelineWrapper=document.querySelector(".nb-ptanimator__page-transitions-area");timelineSelected.setAttribute("data-active-timeline","true");timelines.forEach(function(timeline){if(timelineSelected!=timeline){timeline.setAttribute("data-active-timeline","false")}});var timelineActiveID=timelineSelected.getAttribute("data-timeline-id");self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.id==timelineActiveID){timeline.isActiveTimeline=!0}else{timeline.isActiveTimeline=!1}}).join("")}}).join("");self.folders.map(function(folder){if(folder.isActiveFolder){timelineWrapper.innerHTML="";folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineWrapper.innerHTML+=timeline.timelinePanelHTML();timeline.initOptions()}else{timeline.clearGSAPtimelineStyles(timeline)}}).join("")}else{folder.timelines.map(function(timeline){timeline.clearGSAPtimelineStyles(timeline)}).join("")}}).join("");self.updateDrawerHasActiveTimeline()}
initLeftAnimationsNameUpdate(self){self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.leftAnimations.map(function(animation){animation.updateAnimationName(animation)}).join("")}}).join("")}}).join("")}
setActiveLeftAnimation(self){var animations=document.querySelectorAll(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation");var dropdownAnimations=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__timeline-animations");animations.forEach(function(animation){var deleteAnimation=animation.querySelector(".nb-ptanimator-panel__delete-animation");self.deleteLeftAnimationButton(self,deleteAnimation);var animationIconUpdateName=animation.querySelector(`.nb-ptanimator__animation-update-name`);animation.addEventListener("click",function(e){e.stopImmediatePropagation();if(e.target===animationIconUpdateName||animationIconUpdateName.contains(e.target)){return}
self.setLeftAnimationUI(self,animation);dropdownAnimations.setAttribute("data-open","false")})})}
setLeftAnimationUI(self,animationSelected){var animationTitleActivePreview=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-title-active-preview-wrapper");var animations=document.querySelectorAll(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation");var animationActivePreview=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-active-preview-span");var animationTitle=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-title");var animationCollection=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__timeline-animations");var animationInnerWrapper=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation-inner-wrapper");var timelineObject;animationTitleActivePreview.style.display="flex";animationTitleActivePreview.style.columnGap="16px";self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineObject=timeline;timeline.setThisTimelineAndTimelineView(timeline)}}).join("")}}).join("");if(timelineObject.leftAnimations.length==0){animationActivePreview.innerHTML="";animationTitle.innerHTML="";animationInnerWrapper.innerHTML="";animationTitleActivePreview.style.columnGap="0px";animationCollection.innerHTML="";animationCollection.innerHTML+=timelineObject.newAnimationButtonHTML();self.setActiveLeftAnimation(self);self.newLeftAnimationButton(self);self.initLeftAnimationsNameUpdate(self);return}
animationSelected.setAttribute("data-active-animation","true");animations.forEach(function(animation){if(animationSelected!=animation){animation.setAttribute("data-active-animation","false")}});var animationActiveID=animationSelected.getAttribute("data-animation-id");timelineObject.leftAnimations.map(function(animation){if(animation.id==animationActiveID){animation.isActiveAnimation=!0}else{animation.isActiveAnimation=!1}}).join("");animationCollection.innerHTML="";timelineObject.leftAnimations.map(function(animation){animationCollection.innerHTML+=animation.animationButtonHTML();if(animation.isActiveAnimation){animationActivePreview.innerHTML=animation.animationName;animationTitle.innerHTML=animation.animationName;animationInnerWrapper.innerHTML="";animationInnerWrapper.innerHTML+=animation.animationPanelHTML();animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}}).join("");animationCollection.innerHTML+=timelineObject.newAnimationButtonHTML();self.setActiveLeftAnimation(self);self.newLeftAnimationButton(self);self.initLeftAnimationsNameUpdate(self)}
newLeftAnimationButton(self){var newAnimationButton=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__new-animation");var newAnimationObject;if(newAnimationButton){newAnimationButton.addEventListener("click",function(e){e.stopImmediatePropagation();var isActiveAnimation=!1;self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){if(timeline.leftAnimations.length==0){isActiveAnimation=!0}
timeline.leftAnimations.push(new Animation({parentTimelineObject:timeline,id:timeline.leftAnimations.length+1,isleftorright:"left",isActiveAnimation:isActiveAnimation}));newAnimationObject=timeline.leftAnimations[timeline.leftAnimations.length-1];timeline.setThisTimelineAndTimelineView(timeline);self.setTimelineOverflow()}}).join("")}}).join("");var newAnimationElement=document.createElement("div");newAnimationElement.className="nb-ptanimator-panel__animation";newAnimationElement.setAttribute("data-active-animation",newAnimationObject.isActiveAnimation);newAnimationElement.setAttribute("data-animation-id",newAnimationObject.id);newAnimationElement.innerHTML=`<span>${newAnimationObject.animationName}</span>`;var editSvgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");editSvgElement.setAttribute("class","nb-ptanimator__animation-update-name");editSvgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");editSvgElement.setAttribute("viewBox","0 0 576 512");editSvgElement.setAttribute("data-animation-id",newAnimationObject.id);var editPath=document.createElementNS("http://www.w3.org/2000/svg","path");editPath.setAttribute("d","M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z");editSvgElement.appendChild(editPath);var svgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");svgElement.setAttribute("class","nb-ptanimator-panel__delete-animation");svgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");svgElement.setAttribute("viewBox","0 0 512 512");svgElement.setAttribute("data-animation-id",newAnimationObject.id);var path1=document.createElementNS("http://www.w3.org/2000/svg","path");path1.setAttribute("d","M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144");path1.setAttribute("fill","none");path1.setAttribute("stroke","currentColor");path1.setAttribute("stroke-linecap","round");path1.setAttribute("stroke-linejoin","round");path1.setAttribute("stroke-width","32");var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");rect.setAttribute("x","32");rect.setAttribute("y","64");rect.setAttribute("width","448");rect.setAttribute("height","80");rect.setAttribute("rx","16");rect.setAttribute("ry","16");rect.setAttribute("fill","none");rect.setAttribute("stroke","currentColor");rect.setAttribute("stroke-linecap","round");rect.setAttribute("stroke-linejoin","round");rect.setAttribute("stroke-width","32");var path2=document.createElementNS("http://www.w3.org/2000/svg","path");path2.setAttribute("d","M312 240L200 352M312 352L200 240");path2.setAttribute("fill","none");path2.setAttribute("stroke","currentColor");path2.setAttribute("stroke-linecap","round");path2.setAttribute("stroke-linejoin","round");path2.setAttribute("stroke-width","32");svgElement.appendChild(path1);svgElement.appendChild(rect);svgElement.appendChild(path2);newAnimationElement.appendChild(editSvgElement);newAnimationElement.appendChild(svgElement);newAnimationButton.before(newAnimationElement);self.setActiveLeftAnimation(self);if(isActiveAnimation==!0){self.setLeftAnimationUI(self,newAnimationElement)}
self.initLeftAnimationsNameUpdate(self)})}}
deleteLeftAnimationButton(self,deleteAnimation){deleteAnimation.addEventListener("click",function(e){e.stopImmediatePropagation();var deleteId=deleteAnimation.getAttribute("data-animation-id");var wasActiveAnimationDeleted=!1;var timelineObject;self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineObject=timeline;timeline.leftAnimations.map(function(animation){if(animation.id==deleteId){timeline.leftAnimations=timeline.leftAnimations.filter((t)=>t!==animation);if(animation.isActiveAnimation){wasActiveAnimationDeleted=!0}}}).join("")}}).join("")}}).join("");var animationElement=document.querySelector(`.nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation[data-animation-id="${deleteId}"]`);if(animationElement){animationElement.remove()}
self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.leftAnimations.forEach(function(animation,index){animation.id=index+1});var animationElements=document.querySelectorAll(`.nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation`);animationElements.forEach(function(animationElement,index){var removeButton=animationElement.querySelector(".nb-ptanimator-panel__delete-animation");animationElement.setAttribute("data-animation-id",index+1);removeButton.setAttribute("data-animation-id",index+1)});timeline.setThisTimelineAndTimelineView(timeline)}}).join("")}}).join("");if(timelineObject.leftAnimations.length>0&&wasActiveAnimationDeleted){self.setLeftAnimationUI(self,document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__animation"))}else if(timelineObject.leftAnimations.length==0){self.setLeftAnimationUI(self)}
self.setTimelineOverflow()})}
initRightAnimationsNameUpdate(self){self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.rightAnimations.map(function(animation){animation.updateAnimationName(animation)}).join("")}}).join("")}}).join("")}
setActiveRightAnimation(self){var animations=document.querySelectorAll(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation");var dropdownAnimations=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__timeline-animations");animations.forEach(function(animation){var deleteAnimation=animation.querySelector(".nb-ptanimator-panel__delete-animation");self.deleteRightAnimationButton(self,deleteAnimation);var animationIconUpdateName=animation.querySelector(`.nb-ptanimator__animation-update-name`);animation.addEventListener("click",function(e){e.stopImmediatePropagation();if(e.target===animationIconUpdateName||animationIconUpdateName.contains(e.target)){return}
self.setRightAnimationUI(self,animation);dropdownAnimations.setAttribute("data-open","false")})})}
setRightAnimationUI(self,animationSelected){var animationTitleActivePreview=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-title-active-preview-wrapper");var animations=document.querySelectorAll(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation");var animationActivePreview=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-active-preview-span");var animationTitle=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-title");var animationCollection=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__timeline-animations");var animationInnerWrapper=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation-inner-wrapper");var timelineObject;animationTitleActivePreview.style.display="flex";animationTitleActivePreview.style.columnGap="16px";self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineObject=timeline;timeline.setThisTimelineAndTimelineView(timeline)}}).join("")}}).join("");if(timelineObject.rightAnimations.length==0){animationActivePreview.innerHTML="";animationTitle.innerHTML="";animationInnerWrapper.innerHTML="";animationTitleActivePreview.style.columnGap="0px";animationCollection.innerHTML="";animationCollection.innerHTML+=timelineObject.newAnimationButtonHTML();self.setActiveRightAnimation(self);self.newRightAnimationButton(self);self.initRightAnimationsNameUpdate(self);return}
animationSelected.setAttribute("data-active-animation","true");animations.forEach(function(animation){if(animationSelected!=animation){animation.setAttribute("data-active-animation","false")}});var animationActiveID=animationSelected.getAttribute("data-animation-id");timelineObject.rightAnimations.map(function(animation){if(animation.id==animationActiveID){animation.isActiveAnimation=!0}else{animation.isActiveAnimation=!1}}).join("");animationCollection.innerHTML="";timelineObject.rightAnimations.map(function(animation){animationCollection.innerHTML+=animation.animationButtonHTML();if(animation.isActiveAnimation){animationActivePreview.innerHTML=animation.animationName;animationTitle.innerHTML=animation.animationName;animationInnerWrapper.innerHTML="";animationInnerWrapper.innerHTML+=animation.animationPanelHTML();animation.initOptions();if(animation.method==="from"){animation.fromObject.initOptions()}else if(animation.method==="to"){animation.toObject.initOptions()}else if(animation.method==="fromto"){if(animation.methodfromto==="fromtofrom"){animation.fromtofromObject.initOptions()}else if(animation.methodfromto==="fromtoto"){animation.fromtotoObject.initOptions()}}}}).join("");animationCollection.innerHTML+=timelineObject.newAnimationButtonHTML();self.setActiveRightAnimation(self);self.newRightAnimationButton(self);self.initRightAnimationsNameUpdate(self)}
newRightAnimationButton(self){var newAnimationButton=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__new-animation");var newAnimationObject;if(newAnimationButton){newAnimationButton.addEventListener("click",function(e){e.stopImmediatePropagation();var isActiveAnimation=!1;self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){if(timeline.rightAnimations.length==0){isActiveAnimation=!0}
timeline.rightAnimations.push(new Animation({parentTimelineObject:timeline,id:timeline.rightAnimations.length+1,isleftorright:"right",isActiveAnimation:isActiveAnimation}));newAnimationObject=timeline.rightAnimations[timeline.rightAnimations.length-1];timeline.setThisTimelineAndTimelineView(timeline);self.setTimelineOverflow()}}).join("")}}).join("");var newAnimationElement=document.createElement("div");newAnimationElement.className="nb-ptanimator-panel__animation";newAnimationElement.setAttribute("data-active-animation",newAnimationObject.isActiveAnimation);newAnimationElement.setAttribute("data-animation-id",newAnimationObject.id);newAnimationElement.innerHTML=`<span>${newAnimationObject.animationName}</span>`;var editSvgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");editSvgElement.setAttribute("class","nb-ptanimator__animation-update-name");editSvgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");editSvgElement.setAttribute("viewBox","0 0 576 512");editSvgElement.setAttribute("data-animation-id",newAnimationObject.id);var editPath=document.createElementNS("http://www.w3.org/2000/svg","path");editPath.setAttribute("d","M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z");editSvgElement.appendChild(editPath);var svgElement=document.createElementNS("http://www.w3.org/2000/svg","svg");svgElement.setAttribute("class","nb-ptanimator-panel__delete-animation");svgElement.setAttribute("xmlns","http://www.w3.org/2000/svg");svgElement.setAttribute("viewBox","0 0 512 512");svgElement.setAttribute("data-animation-id",newAnimationObject.id);var path1=document.createElementNS("http://www.w3.org/2000/svg","path");path1.setAttribute("d","M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144");path1.setAttribute("fill","none");path1.setAttribute("stroke","currentColor");path1.setAttribute("stroke-linecap","round");path1.setAttribute("stroke-linejoin","round");path1.setAttribute("stroke-width","32");var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");rect.setAttribute("x","32");rect.setAttribute("y","64");rect.setAttribute("width","448");rect.setAttribute("height","80");rect.setAttribute("rx","16");rect.setAttribute("ry","16");rect.setAttribute("fill","none");rect.setAttribute("stroke","currentColor");rect.setAttribute("stroke-linecap","round");rect.setAttribute("stroke-linejoin","round");rect.setAttribute("stroke-width","32");var path2=document.createElementNS("http://www.w3.org/2000/svg","path");path2.setAttribute("d","M312 240L200 352M312 352L200 240");path2.setAttribute("fill","none");path2.setAttribute("stroke","currentColor");path2.setAttribute("stroke-linecap","round");path2.setAttribute("stroke-linejoin","round");path2.setAttribute("stroke-width","32");svgElement.appendChild(path1);svgElement.appendChild(rect);svgElement.appendChild(path2);newAnimationElement.appendChild(editSvgElement);newAnimationElement.appendChild(svgElement);newAnimationButton.before(newAnimationElement);self.setActiveRightAnimation(self);if(isActiveAnimation==!0){self.setRightAnimationUI(self,newAnimationElement)}
self.initRightAnimationsNameUpdate(self)})}}
deleteRightAnimationButton(self,deleteAnimation){deleteAnimation.addEventListener("click",function(e){e.stopImmediatePropagation();var deleteId=deleteAnimation.getAttribute("data-animation-id");var wasActiveAnimationDeleted=!1;var timelineObject;self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineObject=timeline;timeline.rightAnimations.map(function(animation){if(animation.id==deleteId){timeline.rightAnimations=timeline.rightAnimations.filter((t)=>t!==animation);if(animation.isActiveAnimation){wasActiveAnimationDeleted=!0}}}).join("")}}).join("")}}).join("");var animationElement=document.querySelector(`.nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation[data-animation-id="${deleteId}"]`);if(animationElement){animationElement.remove()}
self.folders.map(function(folder){if(folder.isActiveFolder){folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timeline.rightAnimations.forEach(function(animation,index){animation.id=index+1});var animationElements=document.querySelectorAll(`.nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation`);animationElements.forEach(function(animationElement,index){var removeButton=animationElement.querySelector(".nb-ptanimator-panel__delete-animation");animationElement.setAttribute("data-animation-id",index+1);removeButton.setAttribute("data-animation-id",index+1)});timeline.setThisTimelineAndTimelineView(timeline)}}).join("")}}).join("");if(timelineObject.rightAnimations.length>0&&wasActiveAnimationDeleted){self.setRightAnimationUI(self,document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__animation"))}else if(timelineObject.rightAnimations.length==0){self.setRightAnimationUI(self)}
self.setTimelineOverflow()})}
watchBuilderChangesAndReloadTimelines(self){const historyIndexWatcherMixin={watch:{"$_state.historyIndex"(){setActiveTimelineUIandGSAP(self)},},};const vueApp=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe").__vue_app__;vueApp.mixin(historyIndexWatcherMixin);function setActiveTimelineUIandGSAP(self){var timelineWrapper=document.querySelector(".nb-ptanimator__page-transitions-area");self.folders.map(function(folder){if(folder.isActiveFolder){timelineWrapper.innerHTML="";folder.timelines.map(function(timeline){if(timeline.isActiveTimeline){timelineWrapper.innerHTML+=timeline.timelinePanelHTML();timeline.initOptions()}}).join("")}}).join("")}}}
class Save{JSONobject;animator;constructor(animator){this.animator=animator}
saveButtonHTML(){var saveButton=`
                <div class="nb-ptanimator__pagetransitions-save">Save</div>
                `;return saveButton}
initOptions(){var self=this;this.saveClick(self)}
saveClick(self){var saveButton=document.querySelector(".nb-ptanimator__pagetransitions-save");saveButton.addEventListener("click",function(){self.setJSONobject(self);self.sendJSONobject(self)})}
setJSONobject(self){const folderData=[];this.animator.folders.map((folder)=>{const timelinesValues=folder.timelines.map((timeline)=>{const leftAnimationsValues=timeline.leftAnimations.map((animation)=>{const fromObject=(()=>{let fromObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromObject[prop]){fromObjectValuesArray[prop]=animation.fromObject[prop]}});return fromObjectValuesArray})();const toObject=(()=>{let toObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.toObject[prop]){toObjectValuesArray[prop]=animation.toObject[prop]}});return toObjectValuesArray})();const fromtofromObject=(()=>{let fromtofromObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromtofromObject[prop]){fromtofromObjectValuesArray[prop]=animation.fromtofromObject[prop]}});return fromtofromObjectValuesArray})();const fromtotoObject=(()=>{let fromtotoObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromtotoObject[prop]){fromtotoObjectValuesArray[prop]=animation.fromtotoObject[prop]}});return fromtotoObjectValuesArray})();let animationValuesArray={};if(animation.animationName)animationValuesArray.animationName=animation.animationName;if(animation.isActiveAnimation)animationValuesArray.isActiveAnimation=animation.isActiveAnimation;if(animation.isleftorright)animationValuesArray.isleftorright=animation.isleftorright;if(animation.animWrapperSelector)animationValuesArray.animWrapperSelector=animation.animWrapperSelector;if(animation.element)animationValuesArray.element=animation.element;if(animation.duration)animationValuesArray.duration=animation.duration;if(animation.delay)animationValuesArray.delay=animation.delay;if(animation.easing)animationValuesArray.easing=animation.easing;if(animation.staggerEnabled)animationValuesArray.staggerEnabled=animation.staggerEnabled;if(animation.stagger)animationValuesArray.stagger=animation.stagger;if(animation.splitTextEnabled)animationValuesArray.splitTextEnabled=animation.splitTextEnabled;if(animation.splitText)animationValuesArray.splitText=animation.splitText;if(animation.repeatEnabled)animationValuesArray.repeatEnabled=animation.repeatEnabled;if(animation.repeat)animationValuesArray.repeat=animation.repeat;if(animation.yoyoEnabled)animationValuesArray.yoyoEnabled=animation.yoyoEnabled;if(animation.method)animationValuesArray.method=animation.method;if(animation.methodfromto)animationValuesArray.methodfromto=animation.methodfromto;if(fromObject)animationValuesArray.fromObject=fromObject;if(toObject)animationValuesArray.toObject=toObject;if(fromtofromObject)animationValuesArray.fromtofromObject=fromtofromObject;if(fromtotoObject)animationValuesArray.fromtotoObject=fromtotoObject;return{animation:animationValuesArray}});const rightAnimationsValues=timeline.rightAnimations.map((animation)=>{const fromObject=(()=>{let fromObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromObject[prop]){fromObjectValuesArray[prop]=animation.fromObject[prop]}});return fromObjectValuesArray})();const toObject=(()=>{let toObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.toObject[prop]){toObjectValuesArray[prop]=animation.toObject[prop]}});return toObjectValuesArray})();const fromtofromObject=(()=>{let fromtofromObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromtofromObject[prop]){fromtofromObjectValuesArray[prop]=animation.fromtofromObject[prop]}});return fromtofromObjectValuesArray})();const fromtotoObject=(()=>{let fromtotoObjectValuesArray={};const properties=["method","animWrapperSelector","opacity","autoAlpha","transformX","transformY","transformScale","transformRotate","transformSkewX","transformSkewY","background","color","fontFamily","fontSize","fontWeight","fontStyle","textAlign","textDecoration","textTransform","lineHeight","letterSpacing","wordSpacing","width","height","minWidth","minHeight","maxWidth","maxHeight","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","positionTop","positionBottom","positionLeft","positionRight","borderColor","borderStyle","borderWidthTop","borderWidthBottom","borderWidthLeft","borderWidthRight","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","boxShadowOffsetX","boxShadowOffsetY","boxShadowBlur","boxShadowSpread","boxShadowColor","filterBlur","filterBrightness","filterContrast","filterGrayscale","filterHueRotate","filterInvert","filterSaturate","filterSepia","svgFill","svgStrokeColor","svgStrokeWidth","customProperties","customValues",];properties.forEach((prop)=>{if(animation.fromtotoObject[prop]){fromtotoObjectValuesArray[prop]=animation.fromtotoObject[prop]}});return fromtotoObjectValuesArray})();let animationValuesArray={};if(animation.animationName)animationValuesArray.animationName=animation.animationName;if(animation.isActiveAnimation)animationValuesArray.isActiveAnimation=animation.isActiveAnimation;if(animation.isleftorright)animationValuesArray.isleftorright=animation.isleftorright;if(animation.animWrapperSelector)animationValuesArray.animWrapperSelector=animation.animWrapperSelector;if(animation.element)animationValuesArray.element=animation.element;if(animation.duration)animationValuesArray.duration=animation.duration;if(animation.delay)animationValuesArray.delay=animation.delay;if(animation.easing)animationValuesArray.easing=animation.easing;if(animation.staggerEnabled)animationValuesArray.staggerEnabled=animation.staggerEnabled;if(animation.stagger)animationValuesArray.stagger=animation.stagger;if(animation.splitTextEnabled)animationValuesArray.splitTextEnabled=animation.splitTextEnabled;if(animation.splitText)animationValuesArray.splitText=animation.splitText;if(animation.repeatEnabled)animationValuesArray.repeatEnabled=animation.repeatEnabled;if(animation.repeat)animationValuesArray.repeat=animation.repeat;if(animation.yoyoEnabled)animationValuesArray.yoyoEnabled=animation.yoyoEnabled;if(animation.method)animationValuesArray.method=animation.method;if(animation.methodfromto)animationValuesArray.methodfromto=animation.methodfromto;if(fromObject)animationValuesArray.fromObject=fromObject;if(toObject)animationValuesArray.toObject=toObject;if(fromtofromObject)animationValuesArray.fromtofromObject=fromtofromObject;if(fromtotoObject)animationValuesArray.fromtotoObject=fromtotoObject;return{animation:animationValuesArray}});let timelineValuesArray={};if(timeline.timelineName)timelineValuesArray.timelineName=timeline.timelineName;if(timeline.isActiveTimeline)timelineValuesArray.isActiveTimeline=timeline.isActiveTimeline;if(timeline.container)timelineValuesArray.container=timeline.container;if(timeline.wrapper)timelineValuesArray.wrapper=timeline.wrapper;if(timeline.routefrom)timelineValuesArray.routefrom=timeline.routefrom;if(timeline.routeto)timelineValuesArray.routeto=timeline.routeto;if(timeline.delay)timelineValuesArray.delay=timeline.delay;if(timeline.duration)timelineValuesArray.duration=timeline.duration;if(timeline.widthPerSecond)timelineValuesArray.widthPerSecond=timeline.widthPerSecond;if(leftAnimationsValues)timelineValuesArray.leftAnimations=leftAnimationsValues;if(rightAnimationsValues)timelineValuesArray.rightAnimations=rightAnimationsValues;return{timeline:timelineValuesArray}});const folderObject={folder:{isActiveFolder:folder.isActiveFolder,folderName:folder.folderName,timelines:timelinesValues}};folderData.push(folderObject)});const animatoData=[];const animatorObject={animator:{renderEnabled:self.animator.settingsObject.renderEnabled,saveBuilderEnabled:self.animator.settingsObject.saveBuilderEnabled,ptanimatorHeight:self.animator.ptanimatorHeight,timelineViewHeight:self.animator.timelineViewHeight,timelinesWidth:self.animator.timelinesWidth,animationsWidth:self.animator.animationsWidth,folders:folderData,},};animatoData.push(animatorObject);self.JSONobject=JSON.stringify(animatorObject)}
sendJSONobject(self){var sendJSON=self.JSONobject;jQuery.ajax({type:"POST",url:data_pagetransitions.ajaxurl,data:{action:"get_data_from_pt",pagetransitions_variable:sendJSON},success:function(){jQuery(".nb-ptanimator__pagetransitions-save").text("Saved!");setTimeout(function(){jQuery(".nb-ptanimator__pagetransitions-save").text("Save")},1000)},})}}
class Settings{renderEnabled;saveBuilderEnabled;constructor(renderEnabled,saveBuilderEnabled){this.renderEnabled=renderEnabled||"false";this.saveBuilderEnabled=saveBuilderEnabled||"false"}
settingsHTML(){var settingsHTML=`
                <div class="nb-ptanimator-settings" data-show="false">
                    <div class="nb-ptanimator-settings__caption-input-wrapper">
                        <div class="nb-ptanimator-settings__caption">
                            Render styles
        
                            <input type="checkbox" class="nb-ptanimator-settings__switch" id="nb-ptanimator-settings__switch-render"/>
                            <label for="nb-ptanimator-settings__switch-render">Toggle</label>
                        </div>
                    </div>

                    <div class="nb-ptanimator-settings__caption-input-wrapper">
                        <div class="nb-ptanimator-settings__caption">
                            Save Bricks when saving
        
                            <input type="checkbox" class="nb-ptanimator-settings__switch" id="nb-ptanimator-settings__switch-saveBuilder"/>
                            <label for="nb-ptanimator-settings__switch-saveBuilder">Toggle</label>
                        </div>
                    </div>
        
                    <div class="nb-ptanimator-settings__caption-input-wrapper">
                        <div>
                            Theme
        
                            <div class='page-transitions__switch-themes-wrapper'>
                                <div class='page-transitions__light-theme'></div>
                                <div class='page-transitions__dark-theme'></div>
                                <div class='page-transitions__bricks-theme'></div>
                            </div>
                        </div>
                    </div>
                </div>
                `;return settingsHTML}
initOptions(){var self=this;this.setInitSwitchesCheckedValues(self);this.startCheckboxSwitchesLogic(self);this.saveBuilderWhenSaving(self);this.startThemeSwitch();this.displayLogicSettingsDropdown()}
setInitSwitchesCheckedValues(self){var checkboxRender=document.getElementById("nb-ptanimator-settings__switch-render");var checkboxSaveBuilder=document.getElementById("nb-ptanimator-settings__switch-saveBuilder");if(self.renderEnabled=="true"){checkboxRender.checked=!0}else{checkboxRender.removeAttribute("checked")}
if(self.saveBuilderEnabled=="true"){checkboxSaveBuilder.checked=!0}else{checkboxSaveBuilder.removeAttribute("checked")}}
startCheckboxSwitchesLogic(self){var checkboxSwitchs=document.querySelectorAll(".nb-ptanimator-settings .nb-ptanimator-settings__switch");checkboxSwitchs.forEach(function(checkboxSwitch){if(checkboxSwitch){var captionInputWrapper=checkboxSwitch.closest(".nb-ptanimator-settings__caption-input-wrapper");var inputSwitch=captionInputWrapper.querySelector(".nb-ptanimator-settings__setting-custom-input-switch");checkboxSwitch.addEventListener("click",function(){if(inputSwitch){if(checkboxSwitch.checked){inputSwitch.setAttribute("data-show","true")}else{inputSwitch.setAttribute("data-show","false")}}
self.getInputValuesAndSetSettingsVariables(self);self.saveBuilderWhenSaving(self)})}})}
getInputValuesAndSetSettingsVariables(self){var renderEnabled=document.querySelector("#nb-ptanimator-settings__switch-render");if(renderEnabled.checked){self.renderEnabled="true"}else{self.renderEnabled="false"}
var saveBuilderEnabled=document.querySelector("#nb-ptanimator-settings__switch-saveBuilder");if(saveBuilderEnabled.checked){self.saveBuilderEnabled="true"}else{self.saveBuilderEnabled="false"}}
saveBuilderWhenSaving(self){var bricksSaveButton=document.querySelector("#bricks-toolbar li.save");var animatorSaveButton=document.querySelector(".nb-ptanimator__pagetransitions-save");if(self.saveBuilderEnabled=="true"){if(bricksSaveButton&&animatorSaveButton){function handleAnimatorSaveClick(){bricksSaveButton.click()}
animatorSaveButton.addEventListener("click",handleAnimatorSaveClick);animatorSaveButton._savedClickHandler=handleAnimatorSaveClick}}else{if(animatorSaveButton&&animatorSaveButton._savedClickHandler){animatorSaveButton.removeEventListener("click",animatorSaveButton._savedClickHandler);animatorSaveButton._savedClickHandler=null}}}
startThemeSwitch(){var lightTheme=document.querySelector(".page-transitions__light-theme");initThemeSwitchWithSendData(lightTheme,"light");var darkTheme=document.querySelector(".page-transitions__dark-theme");initThemeSwitchWithSendData(darkTheme,"dark");var bricksTheme=document.querySelector(".page-transitions__bricks-theme");initThemeSwitchWithSendData(bricksTheme,"bricks");switch(data_pagetransitions_theme.selected_theme){case "light":lightTheme.classList.add("page-transitions__theme--active");setAnimatorTheme("light");break;case "dark":darkTheme.classList.add("page-transitions__theme--active");setAnimatorTheme("dark");break;case "bricks":bricksTheme.classList.add("page-transitions__theme--active");setAnimatorTheme("bricks");break}
function initThemeSwitchWithSendData(themeToggle,theme){themeToggle.addEventListener("click",function(event){event.stopPropagation();var removeActive=document.querySelector(".page-transitions__theme--active");removeActive.classList.remove("page-transitions__theme--active");themeToggle.classList.add("page-transitions__theme--active");setAnimatorTheme(theme);jQuery.ajax({type:"POST",url:data_pagetransitions.ajaxurl,data:{action:"get_data_from_pt",PageTransitionsTheme:theme}})})}
function setAnimatorTheme(theme){var root=document.documentElement;var drawer=document.querySelector(".nb-ptanimator");switch(theme){case "light":drawer.classList.remove("page-transitions--dark-theme");drawer.classList.remove("page-transitions--bricks-theme");drawer.classList.add("page-transitions--light-theme");root.style.setProperty("--ptanimator-color","#454f59");root.style.setProperty("--ptanimator-panel-background","#fbfcfd");root.style.setProperty("--ptanimator-accent-secondary","#e0e5e9");root.style.setProperty("--ptanimator-accent-secondary-hover","#e0e5e92");root.style.setProperty("--ptanimator-border-color","#d4d9dd");root.style.setProperty("--ptanimator-tippy-color","#fff");root.style.setProperty("--ptanimator-tippy-background","#000");break;case "dark":drawer.classList.remove("page-transitions--light-theme");drawer.classList.remove("page-transitions--bricks-theme");drawer.classList.add("page-transitions--dark-theme");root.style.setProperty("--ptanimator-color","#fff");root.style.setProperty("--ptanimator-panel-background","#111111");root.style.setProperty("--ptanimator-accent-secondary","#26262A");root.style.setProperty("--ptanimator-accent-secondary-hover","#26262a42");root.style.setProperty("--ptanimator-border-color","#252525");root.style.setProperty("--ptanimator-tippy-color","#000");root.style.setProperty("--ptanimator-tippy-background","#fff");break;case "bricks":drawer.classList.remove("page-transitions--light-theme");drawer.classList.remove("page-transitions--dark-theme");drawer.classList.add("page-transitions--bricks-theme");root.style.setProperty("--ptanimator-color","#e0e3e5");root.style.setProperty("--ptanimator-panel-background","#23282d");root.style.setProperty("--ptanimator-accent-secondary","#343c43");root.style.setProperty("--ptanimator-accent-secondary-hover","#343c4342");root.style.setProperty("--ptanimator-border-color","#454f59");root.style.setProperty("--ptanimator-tippy-color","#000");root.style.setProperty("--ptanimator-tippy-background","#fff");break}}}
displayLogicSettingsDropdown(){var settingsButton=document.querySelector(".nb-ptanimator__pagetransitions-settings");var settingsDropdown=document.querySelector(".nb-ptanimator-settings");settingsButton.addEventListener("click",function(event){event.stopImmediatePropagation();if(settingsDropdown.getAttribute("data-show")==="true"){if(!settingsDropdown.contains(event.target)){settingsDropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}}else{settingsDropdown.setAttribute("data-show","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!settingsDropdown.contains(event.target)){settingsDropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}}}}
class Folder{isActiveFolder;folderName;id;timelines=[];constructor({folderName,isActiveFolder,id,timelines}){this.folderName=folderName||"Folder "+id;this.isActiveFolder=isActiveFolder||!1;this.id=id;this.timelines=timelines||[new Timeline({parentFolderObject:this,isActiveTimeline:!0,id:1})]}
folderButtonHTML(){var folderDisplay=`
            <div class="nb-ptanimator__folder" data-active-folder="${this.isActiveFolder}" data-folder-id="${this.id}">
                <span>${this.folderName}</span>

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="nb-ptanimator__folder-update-name" data-folder-id="${this.id}">
                    <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/>
                </svg>
                <svg class="nb-ptanimator__delete-folder" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512" fill="none" data-folder-id="${this.id}">
                    <path d="M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <rect x="32" y="64" width="448" height="80" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M312 240L200 352M312 352L200 240"/>
                </svg>
            </div>
            `;return folderDisplay}
newTimelineButtonHTML(){var newTimelineDisplay=`
            <div class="nb-ptanimator__folder-new-timeline" data-folder-id="${this.id}">New Page Transition</div>
            `;return newTimelineDisplay}}
class Timeline{parentFolderObject;isActiveTimeline;timelineName;id;leftAnimations;rightAnimations;container;wrapper;routefrom;routeto;delay;timelineGSAP;duration;widthPerSecond;constructor({parentFolderObject,timelineName,isActiveTimeline,id,container,wrapper,routefrom,routeto,delay,leftAnimations,rightAnimations,duration,widthPerSecond}){this.parentFolderObject=parentFolderObject;this.timelineName=timelineName||"Page Transition "+id;this.isActiveTimeline=isActiveTimeline||!1;this.id=id;this.leftAnimations=leftAnimations||[new Animation({parentTimelineObject:this,isActiveAnimation:!0,id:1,isleftorright:"left"})];this.rightAnimations=rightAnimations||[new Animation({parentTimelineObject:this,isActiveAnimation:!0,id:1,isleftorright:"right"})];this.container=container||"main";this.wrapper=wrapper||"body";this.routefrom=routefrom||"";this.routeto=routeto||"";this.delay=delay||"2";this.duration=duration||"15s";this.widthPerSecond=widthPerSecond||"100"}
timelineButtonHTML(){var timelineDisplay=`
            <div class="nb-ptanimator__folder-timeline" data-active-timeline="${this.isActiveTimeline}" data-timeline-id="${this.id}">
                <span>${this.timelineName}</span>

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="nb-ptanimator__timeline-update-name" data-timeline-id="${this.id}" viewBox="0 0 512 512">
                    <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/>
                </svg>
                <svg class="nb-ptanimator__delete-timeline" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" data-timeline-id="${this.id}" viewBox="0 0 512 512">
                    <path d="M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <rect x="32" y="64" width="448" height="80" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M312 240L200 352M312 352L200 240"/>
                </svg>
            </div>
            `;return timelineDisplay}
timelinePanelHTML(){var timelineDisplay=`
            <div class="nb-ptanimator__select-timeline-view-switch">
                <img class="nb-ptanimator__select-timeline-view-img" src='data:image/png;base64, '></img>
                <span class="nb-ptanimator__select-timeline-view-text">Select a page transition to start editing</span>
            </div>
            <div class="nb-ptanimator-panel__timeline" data-active-timeline="${this.isActiveTimeline}" data-timeline-id="${this.id}">
                <div class="nb-ptanimator-panel__timeline-title" spellcheck="false">
                    ${this.timelineName}
                    <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--timeline">i</div>
                </div>
    
                <div class="nb-ptanimator-panel__pt-controls">
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Container
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--container">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__trigger-custom-container" value="${this.container}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Wrapper
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--wrapper">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__trigger-custom-wrapper" value="${this.wrapper}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Path from
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--route-from">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__trigger-custom-route-from" value="${this.routefrom}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>

                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Path to
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--route-to">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__trigger-custom-route-to" value="${this.routeto}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>

                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Wait
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--delay">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__trigger-custom-delay" value="${this.delay}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                </div>
            </div>
            `;return timelineDisplay}
newAnimationButtonHTML(){var newTimelineDisplay=`
            <div class="nb-ptanimator-panel__new-animation">New animation</div>
            `;return newTimelineDisplay}
updateTimelineName(self){var timelineIconUpdateName=document.querySelector(`.nb-ptanimator__timeline-update-name[data-timeline-id="${this.id}"]`);timelineIconUpdateName.addEventListener("click",function(e){var timelineTitleElement=document.querySelector(".nb-ptanimator-panel__timeline-title");e.stopImmediatePropagation();e.preventDefault();var timelinesAtFolder=document.querySelectorAll(".nb-ptanimator__folder-timeline");timelinesAtFolder.forEach(function(timelineAtFolder){if(timelineAtFolder.getAttribute("data-timeline-id")==self.id){var timelineSpan=document.querySelector(`.nb-ptanimator__folder-timeline[data-timeline-id=${CSS.escape(String(self.id))}] span`);timelineSpan.contentEditable=!0;timelineSpan.focus();var range,selection;if(window.getSelection&&document.createRange){selection=window.getSelection();range=document.createRange();range.selectNodeContents(timelineSpan);selection.removeAllRanges();selection.addRange(range)}else if(document.selection&&document.body.createTextRange){range=document.body.createTextRange();range.moveToElementText(timelineSpan);range.select()}
timelineSpan.addEventListener("input",function(){const newName=timelineSpan.textContent.trim();if(self.isActiveTimeline){timelineTitleElement.firstChild.textContent=newName}});timelineSpan.addEventListener("blur",function(){const newName=timelineSpan.textContent.trim();self.timelineName=newName;timelineSpan.contentEditable=!1});timelineSpan.addEventListener("keydown",function(event){if(event.key==="Enter"){event.preventDefault();timelineSpan.blur()}})}})})}
initOptions(){var self=this;this.startInputsAndDropdowns(self);this.loadTimelineTippys();this.setThisTimelineAndTimelineView(self)}
startInputsAndDropdowns(self){var inputWrappers=document.querySelectorAll(".nb-ptanimator-panel__timeline .nb-ptanimator-panel__input-wrapper");inputWrappers.forEach(function(inputWrapper){var input=inputWrapper.querySelector(".nb-ptanimator-panel__input");if(input){input.addEventListener("change",function(){self.getInputValuesAndSetTimelineVariables(self);self.setThisTimelineAndTimelineView(self)})}
var dot=inputWrapper.querySelector(".nb-ptanimator-panel__dot-input-indicator");if(dot){dot.addEventListener("click",function(){if(input){input.value=""}
self.getInputValuesAndSetTimelineVariables(self);self.setThisTimelineAndTimelineView(self)})}})}
getInputValuesAndSetTimelineVariables(self){var container=document.querySelector(".nb-ptanimator-panel__trigger-custom-container");if(container){self.container=container.value}
var wrapper=document.querySelector(".nb-ptanimator-panel__trigger-custom-wrapper");if(wrapper){self.wrapper=wrapper.value}
var routefrom=document.querySelector(".nb-ptanimator-panel__trigger-custom-route-from");if(routefrom){self.routefrom=routefrom.value}
var routeto=document.querySelector(".nb-ptanimator-panel__trigger-custom-route-to");if(routeto){self.routeto=routeto.value}
var delay=document.querySelector(".nb-ptanimator-panel__trigger-custom-delay");if(delay){self.delay=delay.value}}
loadTimelineTippys(){tippy(document.querySelector(".nb-ptanimator-panel__info--timeline"),{allowHTML:!0,content:"Page transitions are divided by Leave animations (when user leaves the page) and Enter animations (when user enters the next page).<br> All Enter animations will play after Leave animations end and when next page is ready. In addition, all timelines from Animator and Next Bricks elements will be included after Enter animations automatically.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"400px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),});tippy(document.querySelector(".nb-ptanimator-panel__info--container"),{allowHTML:!0,content:"This content is updated when the user navigates between pages (usually main).",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),});tippy(document.querySelector(".nb-ptanimator-panel__info--wrapper"),{allowHTML:!0,content:"Contains all the page structure (usually body). Everything inside this wrapper and outside of the container will not be updated.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),});tippy(document.querySelector(".nb-ptanimator-panel__info--route-from"),{allowHTML:!0,content:"The page from which the page transition will go from. If it is not specified it will load everywhere. e.g: /index",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),});tippy(document.querySelector(".nb-ptanimator-panel__info--route-to"),{allowHTML:!0,content:"The page to which the page transition will go to. If it is not specified it will load everywhere. e.g: /projects/zion_academy",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),});tippy(document.querySelector(".nb-ptanimator-panel__info--delay"),{allowHTML:!0,content:"Determines how much time to wait until checking if the next page is ready to display it alongside Enter animations. This value (in seconds) should be equal or greater than all leave animations combined.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",animation:"scale",duration:200,appendTo:document.querySelector(".nb-ptanimator__page-transitions-area"),})}
setThisTimelineAndTimelineView(self){self.createGSAPtimeline(self);self.timelineViewHTML(self);self.timelineViewGSAP(self);self.updateTimelineViewDuration(self);self.updateTweensDurationAndDelayOnResizeAndDrag(self);self.setTimelineOverflow(self)}
createGSAPtimeline(self){gsap.config({nullTargetWarn:!1});self.clearGSAPtimelineStyles(self);var timeline=gsap.timeline({paused:!0});var highest=0;self.leftAnimations.forEach(function(animation){var sum=Number(animation.duration)+Number(animation.delay);if(sum>=highest){highest=sum}});var leftAndRightAnimations=self.leftAnimations.concat(self.rightAnimations);leftAndRightAnimations.forEach(function(animation,index){animation.position=index+1;switch(animation.method){case "from":var animationFromConfig={duration:Number(animation.duration)};animationFromConfig.id=index+1;if(animation.delay){animationFromConfig.delay=Number(animation.delay)}
if(animation.easing){animationFromConfig.ease=animation.easing}
if(animation.staggerEnabled=="true"){animationFromConfig.stagger=animation.stagger}
if(animation.repeatEnabled=="true"){animationFromConfig.repeat=Number(animation.repeat)}
if(animation.yoyoEnabled=="true"){animationFromConfig.yoyo=!0}
if(animation.fromObject.opacity){animationFromConfig.opacity=animation.fromObject.opacity}
if(animation.fromObject.autoAlpha){animationFromConfig.autoAlpha=animation.fromObject.autoAlpha}
if(animation.fromObject.transformX){animationFromConfig.x=animation.fromObject.transformX}
if(animation.fromObject.transformY){animationFromConfig.y=animation.fromObject.transformY}
if(animation.fromObject.transformScale){animationFromConfig.scale=animation.fromObject.transformScale}
if(animation.fromObject.transformRotate){animationFromConfig.rotation=animation.fromObject.transformRotate}
if(animation.fromObject.transformSkewX){animationFromConfig.skewX=animation.fromObject.transformSkewX}
if(animation.fromObject.transformSkewY){animationFromConfig.skewY=animation.fromObject.transformSkewY}
if(animation.fromObject.background){animationFromConfig.backgroundColor=animation.fromObject.background}
if(animation.fromObject.color){animationFromConfig.color=animation.fromObject.color}
if(animation.fromObject.fontFamily){animationFromConfig.fontFamily=animation.fromObject.fontFamily}
if(animation.fromObject.fontSize){animationFromConfig.fontSize=animation.fromObject.fontSize}
if(animation.fromObject.fontWeight){animationFromConfig.fontWeight=animation.fromObject.fontWeight}
if(animation.fromObject.fontStyle){animationFromConfig.fontStyle=animation.fromObject.fontStyle}
if(animation.fromObject.textAlign){animationFromConfig.textAlign=animation.fromObject.textAlign}
if(animation.fromObject.textDecoration){animationFromConfig.textDecoration=animation.fromObject.textDecoration}
if(animation.fromObject.textTransform){animationFromConfig.textTransform=animation.fromObject.textTransform}
if(animation.fromObject.lineHeight){animationFromConfig.lineHeight=animation.fromObject.lineHeight}
if(animation.fromObject.letterSpacing){animationFromConfig.letterSpacing=animation.fromObject.letterSpacing}
if(animation.fromObject.wordSpacing){animationFromConfig.wordSpacing=animation.fromObject.wordSpacing}
if(animation.fromObject.width){animationFromConfig.width=animation.fromObject.width}
if(animation.fromObject.height){animationFromConfig.height=animation.fromObject.height}
if(animation.fromObject.minWidth){animationFromConfig.minWidth=animation.fromObject.minWidth}
if(animation.fromObject.minHeight){animationFromConfig.minHeight=animation.fromObject.minHeight}
if(animation.fromObject.maxWidth){animationFromConfig.maxWidth=animation.fromObject.maxWidth}
if(animation.fromObject.maxHeight){animationFromConfig.maxHeight=animation.fromObject.maxHeight}
if(animation.fromObject.paddingTop){animationFromConfig.paddingTop=animation.fromObject.paddingTop}
if(animation.fromObject.paddingBottom){animationFromConfig.paddingBottom=animation.fromObject.paddingBottom}
if(animation.fromObject.paddingLeft){animationFromConfig.paddingLeft=animation.fromObject.paddingLeft}
if(animation.fromObject.paddingRight){animationFromConfig.paddingRight=animation.fromObject.paddingRight}
if(animation.fromObject.marginTop){animationFromConfig.marginTop=animation.fromObject.marginTop}
if(animation.fromObject.marginBottom){animationFromConfig.marginBottom=animation.fromObject.marginBottom}
if(animation.fromObject.marginLeft){animationFromConfig.marginLeft=animation.fromObject.marginLeft}
if(animation.fromObject.marginRight){animationFromConfig.marginRight=animation.fromObject.marginRight}
if(animation.fromObject.positionTop){animationFromConfig.top=animation.fromObject.positionTop}
if(animation.fromObject.positionBottom){animationFromConfig.bottom=animation.fromObject.positionBottom}
if(animation.fromObject.positionLeft){animationFromConfig.left=animation.fromObject.positionLeft}
if(animation.fromObject.positionRight){animationFromConfig.right=animation.fromObject.positionRight}
if(animation.fromObject.borderColor){animationFromConfig.borderColor=animation.fromObject.borderColor}
if(animation.fromObject.borderStyle){animationFromConfig.borderStyle=animation.fromObject.borderStyle}
if(animation.fromObject.borderWidthTop){animationFromConfig.borderTopWidth=animation.fromObject.borderWidthTop}
if(animation.fromObject.borderWidthBottom){animationFromConfig.borderBottomWidth=animation.fromObject.borderWidthBottom}
if(animation.fromObject.borderWidthLeft){animationFromConfig.borderLeftWidth=animation.fromObject.borderWidthLeft}
if(animation.fromObject.borderWidthRight){animationFromConfig.borderRightWidth=animation.fromObject.borderWidthRight}
if(animation.fromObject.borderTopLeftRadius){animationFromConfig.borderTopLeftRadius=animation.fromObject.borderTopLeftRadius}
if(animation.fromObject.borderTopRightRadius){animationFromConfig.borderTopRightRadius=animation.fromObject.borderTopRightRadius}
if(animation.fromObject.borderBottomLeftRadius){animationFromConfig.borderBottomLeftRadius=animation.fromObject.borderBottomLeftRadius}
if(animation.fromObject.borderBottomRightRadius){animationFromConfig.borderBottomRightRadius=animation.fromObject.borderBottomRightRadius}
if(animation.fromObject.boxShadowOffsetX&&animation.fromObject.boxShadowOffsetY&&animation.fromObject.boxShadowBlur&&animation.fromObject.boxShadowSpread&&animation.fromObject.boxShadowColor){var boxShadowProperties={offsetX:animation.fromObject.boxShadowOffsetX,offsetY:animation.fromObject.boxShadowOffsetY,blur:animation.fromObject.boxShadowBlur,spread:animation.fromObject.boxShadowSpread,color:animation.fromObject.boxShadowColor,};animationFromConfig.boxShadow=`${boxShadowProperties.offsetX} ${boxShadowProperties.offsetY} ${boxShadowProperties.blur} ${boxShadowProperties.spread} ${boxShadowProperties.color}`}
var filterString="";if(animation.fromObject.filterBlur){filterString+=`blur(${animation.fromObject.filterBlur}) `}
if(animation.fromObject.filterBrightness){filterString+=`brightness(${animation.fromObject.filterBrightness}) `}
if(animation.fromObject.filterContrast){filterString+=`contrast(${animation.fromObject.filterContrast}) `}
if(animation.fromObject.filterGrayscale){filterString+=`grayscale(${animation.fromObject.filterGrayscale}) `}
if(animation.fromObject.filterHueRotate){filterString+=`hue-rotate(${animation.fromObject.filterHueRotate}) `}
if(animation.fromObject.filterInvert){filterString+=`invert(${animation.fromObject.filterInvert}) `}
if(animation.fromObject.filterSaturate){filterString+=`saturate(${animation.fromObject.filterSaturate}) `}
if(animation.fromObject.filterSepia){filterString+=`sepia(${animation.fromObject.filterSepia}) `}
if(filterString!=""){filterString=filterString.trim();animationFromConfig.filter=filterString}
if(animation.fromObject.svgFill){animationFromConfig.fill=animation.fromObject.svgFill}
if(animation.fromObject.svgStrokeColor){animationFromConfig.stroke=animation.fromObject.svgStrokeColor}
if(animation.fromObject.svgStrokeWidth){animationFromConfig.strokeWidth=animation.fromObject.svgStrokeWidth}
if(animation.fromObject.customProperties&&animation.fromObject.customValues){const properties=animation.fromObject.customProperties.split("d110708");const values=animation.fromObject.customValues.split("d110708");properties.forEach((property,index)=>{const value=values[index];if(property!==""&&value!==""){animationFromConfig[property]=value}})}
var iframe=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var elementToAnimate=animation.element;if(elementToAnimate==""){elementToAnimate="this"}
if(animation.splitTextEnabled=="true"){if(self.trigger!=""){if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}
animation.split=new SplitText(iframe.querySelector(`${elementToAnimate}, ${elementToAnimate} *`),{type:animation.splitText,charsClass:`${elementToAnimate}-char nb-animator-char`,wordsClass:`${elementToAnimate}-word nb-animator-word`,linesClass:`${elementToAnimate}-line nb-animator-line`,});animation.isSplitted=!0}}else{if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}}
if(iframe.querySelector(elementToAnimate)){if(animation.splitTextEnabled=="true"){if(animation.splitText.includes("char")){if(animation.isleftorright=="left"){animation.start=0;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationFromConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationFromConfig,highest)}}else if(animation.splitText.includes("word")){if(animation.isleftorright=="left"){animation.start=0;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationFromConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationFromConfig,highest)}}else if(animation.splitText.includes("line")){if(animation.isleftorright=="left"){animation.start=0;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationFromConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.from(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationFromConfig,highest)}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.from(iframe.querySelectorAll(elementToAnimate),animationFromConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.from(iframe.querySelectorAll(elementToAnimate),animationFromConfig,highest)}}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.from(iframe.querySelectorAll(elementToAnimate),animationFromConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.from(iframe.querySelectorAll(elementToAnimate),animationFromConfig,highest)}}}
break;case "to":var animationToConfig={duration:Number(animation.duration)};animationToConfig.id=index+1;if(animation.delay){animationToConfig.delay=Number(animation.delay)}
if(animation.easing){animationToConfig.ease=animation.easing}
if(animation.staggerEnabled=="true"){animationToConfig.stagger=animation.stagger}
if(animation.repeatEnabled=="true"){animationToConfig.repeat=Number(animation.repeat)}
if(animation.yoyoEnabled=="true"){animationToConfig.yoyo=!0}
if(animation.toObject.opacity){animationToConfig.opacity=animation.toObject.opacity}
if(animation.toObject.autoAlpha){animationToConfig.autoAlpha=animation.toObject.autoAlpha}
if(animation.toObject.transformX){animationToConfig.x=animation.toObject.transformX}
if(animation.toObject.transformY){animationToConfig.y=animation.toObject.transformY}
if(animation.toObject.transformScale){animationToConfig.scale=animation.toObject.transformScale}
if(animation.toObject.transformRotate){animationToConfig.rotation=animation.toObject.transformRotate}
if(animation.toObject.transformSkewX){animationToConfig.skewX=animation.toObject.transformSkewX}
if(animation.toObject.transformSkewY){animationToConfig.skewY=animation.toObject.transformSkewY}
if(animation.toObject.background){animationToConfig.backgroundColor=animation.toObject.background}
if(animation.toObject.color){animationToConfig.color=animation.toObject.color}
if(animation.toObject.fontFamily){animationToConfig.fontFamily=animation.toObject.fontFamily}
if(animation.toObject.fontSize){animationToConfig.fontSize=animation.toObject.fontSize}
if(animation.toObject.fontWeight){animationToConfig.fontWeight=animation.toObject.fontWeight}
if(animation.toObject.fontStyle){animationToConfig.fontStyle=animation.toObject.fontStyle}
if(animation.toObject.textAlign){animationToConfig.textAlign=animation.toObject.textAlign}
if(animation.toObject.textDecoration){animationToConfig.textDecoration=animation.toObject.textDecoration}
if(animation.toObject.textTransform){animationToConfig.textTransform=animation.toObject.textTransform}
if(animation.toObject.lineHeight){animationToConfig.lineHeight=animation.toObject.lineHeight}
if(animation.toObject.letterSpacing){animationToConfig.letterSpacing=animation.toObject.letterSpacing}
if(animation.toObject.wordSpacing){animationToConfig.wordSpacing=animation.toObject.wordSpacing}
if(animation.toObject.width){animationToConfig.width=animation.toObject.width}
if(animation.toObject.height){animationToConfig.height=animation.toObject.height}
if(animation.toObject.minWidth){animationToConfig.minWidth=animation.toObject.minWidth}
if(animation.toObject.minHeight){animationToConfig.minHeight=animation.toObject.minHeight}
if(animation.toObject.maxWidth){animationToConfig.maxWidth=animation.toObject.maxWidth}
if(animation.toObject.maxHeight){animationToConfig.maxHeight=animation.toObject.maxHeight}
if(animation.toObject.paddingTop){animationToConfig.paddingTop=animation.toObject.paddingTop}
if(animation.toObject.paddingBottom){animationToConfig.paddingBottom=animation.toObject.paddingBottom}
if(animation.toObject.paddingLeft){animationToConfig.paddingLeft=animation.toObject.paddingLeft}
if(animation.toObject.paddingRight){animationToConfig.paddingRight=animation.toObject.paddingRight}
if(animation.toObject.marginTop){animationToConfig.marginTop=animation.toObject.marginTop}
if(animation.toObject.marginBottom){animationToConfig.marginBottom=animation.toObject.marginBottom}
if(animation.toObject.marginLeft){animationToConfig.marginLeft=animation.toObject.marginLeft}
if(animation.toObject.marginRight){animationToConfig.marginRight=animation.toObject.marginRight}
if(animation.toObject.positionTop){animationToConfig.top=animation.toObject.positionTop}
if(animation.toObject.positionBottom){animationToConfig.bottom=animation.toObject.positionBottom}
if(animation.toObject.positionLeft){animationToConfig.left=animation.toObject.positionLeft}
if(animation.toObject.positionRight){animationToConfig.right=animation.toObject.positionRight}
if(animation.toObject.borderColor){animationToConfig.borderColor=animation.toObject.borderColor}
if(animation.toObject.borderStyle){animationToConfig.borderStyle=animation.toObject.borderStyle}
if(animation.toObject.borderWidthTop){animationToConfig.borderTopWidth=animation.toObject.borderWidthTop}
if(animation.toObject.borderWidthBottom){animationToConfig.borderBottomWidth=animation.toObject.borderWidthBottom}
if(animation.toObject.borderWidthLeft){animationToConfig.borderLeftWidth=animation.toObject.borderWidthLeft}
if(animation.toObject.borderWidthRight){animationToConfig.borderRightWidth=animation.toObject.borderWidthRight}
if(animation.toObject.borderTopLeftRadius){animationToConfig.borderTopLeftRadius=animation.toObject.borderTopLeftRadius}
if(animation.toObject.borderTopRightRadius){animationToConfig.borderTopRightRadius=animation.toObject.borderTopRightRadius}
if(animation.toObject.borderBottomLeftRadius){animationToConfig.borderBottomLeftRadius=animation.toObject.borderBottomLeftRadius}
if(animation.toObject.borderBottomRightRadius){animationToConfig.borderBottomRightRadius=animation.toObject.borderBottomRightRadius}
if(animation.toObject.boxShadowOffsetX&&animation.toObject.boxShadowOffsetY&&animation.toObject.boxShadowBlur&&animation.toObject.boxShadowSpread&&animation.toObject.boxShadowColor){var boxShadowProperties={offsetX:animation.toObject.boxShadowOffsetX,offsetY:animation.toObject.boxShadowOffsetY,blur:animation.toObject.boxShadowBlur,spread:animation.toObject.boxShadowSpread,color:animation.toObject.boxShadowColor,};animationToConfig.boxShadow=`${boxShadowProperties.offsetX} ${boxShadowProperties.offsetY} ${boxShadowProperties.blur} ${boxShadowProperties.spread} ${boxShadowProperties.color}`}
var filterString="";if(animation.toObject.filterBlur){filterString+=`blur(${animation.toObject.filterBlur}) `}
if(animation.toObject.filterBrightness){filterString+=`brightness(${animation.toObject.filterBrightness}) `}
if(animation.toObject.filterContrast){filterString+=`contrast(${animation.toObject.filterContrast}) `}
if(animation.toObject.filterGrayscale){filterString+=`grayscale(${animation.toObject.filterGrayscale}) `}
if(animation.toObject.filterHueRotate){filterString+=`hue-rotate(${animation.toObject.filterHueRotate}) `}
if(animation.toObject.filterInvert){filterString+=`invert(${animation.toObject.filterInvert}) `}
if(animation.toObject.filterSaturate){filterString+=`saturate(${animation.toObject.filterSaturate}) `}
if(animation.toObject.filterSepia){filterString+=`sepia(${animation.toObject.filterSepia}) `}
if(filterString!=""){filterString=filterString.trim();animationToConfig.filter=filterString}
if(animation.toObject.svgFill){animationToConfig.fill=animation.toObject.svgFill}
if(animation.toObject.svgStrokeColor){animationToConfig.stroke=animation.toObject.svgStrokeColor}
if(animation.toObject.svgStrokeWidth){animationToConfig.strokeWidth=animation.toObject.svgStrokeWidth}
if(animation.toObject.customProperties&&animation.toObject.customValues){const properties=animation.toObject.customProperties.split("d110708");const values=animation.toObject.customValues.split("d110708");properties.forEach((property,index)=>{const value=values[index];if(property!==""&&value!==""){animationToConfig[property]=value}})}
var iframe=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var elementToAnimate=animation.element;if(elementToAnimate==""){elementToAnimate="this"}
if(animation.splitTextEnabled=="true"){if(self.trigger!=""){if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}
animation.split=new SplitText(iframe.querySelector(`${elementToAnimate}, ${elementToAnimate} *`),{type:animation.splitText,charsClass:`${elementToAnimate}-char nb-animator-char`,wordsClass:`${elementToAnimate}-word nb-animator-word`,linesClass:`${elementToAnimate}-line nb-animator-line`,});animation.isSplitted=!0}}else{if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}}
if(iframe.querySelector(elementToAnimate)){if(animation.splitTextEnabled=="true"){if(animation.splitText.includes("char")){if(animation.isleftorright=="left"){animation.start=0;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationToConfig,highest)}}else if(animation.splitText.includes("word")){if(animation.isleftorright=="left"){animation.start=0;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationToConfig,highest)}}else if(animation.splitText.includes("line")){if(animation.isleftorright=="left"){animation.start=0;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.to(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationToConfig,highest)}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.to(iframe.querySelectorAll(elementToAnimate),animationToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.to(iframe.querySelectorAll(elementToAnimate),animationToConfig,highest)}}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.to(iframe.querySelectorAll(elementToAnimate),animationToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.to(iframe.querySelectorAll(elementToAnimate),animationToConfig,highest)}}}
break;case "fromto":var animationFromToToConfig={duration:Number(animation.duration)};animationFromToToConfig.id=index+1;if(animation.delay){animationFromToToConfig.delay=Number(animation.delay)}
if(animation.easing){animationFromToToConfig.ease=animation.easing}
if(animation.staggerEnabled=="true"){animationFromToToConfig.stagger=animation.stagger}
if(animation.repeatEnabled=="true"){animationFromToToConfig.repeat=Number(animation.repeat)}
if(animation.yoyoEnabled=="true"){animationFromToToConfig.yoyo=!0}
if(animation.fromtotoObject.opacity){animationFromToToConfig.opacity=animation.fromtotoObject.opacity}
if(animation.fromtotoObject.autoAlpha){animationFromToToConfig.autoAlpha=animation.fromtotoObject.autoAlpha}
if(animation.fromtotoObject.transformX){animationFromToToConfig.x=animation.fromtotoObject.transformX}
if(animation.fromtotoObject.transformY){animationFromToToConfig.y=animation.fromtotoObject.transformY}
if(animation.fromtotoObject.transformScale){animationFromToToConfig.scale=animation.fromtotoObject.transformScale}
if(animation.fromtotoObject.transformRotate){animationFromToToConfig.rotation=animation.fromtotoObject.transformRotate}
if(animation.fromtotoObject.transformSkewX){animationFromToToConfig.skewX=animation.fromtotoObject.transformSkewX}
if(animation.fromtotoObject.transformSkewY){animationFromToToConfig.skewY=animation.fromtotoObject.transformSkewY}
if(animation.fromtotoObject.background){animationFromToToConfig.backgroundColor=animation.fromtotoObject.background}
if(animation.fromtotoObject.color){animationFromToToConfig.color=animation.fromtotoObject.color}
if(animation.fromtotoObject.fontFamily){animationFromToToConfig.fontFamily=animation.fromtotoObject.fontFamily}
if(animation.fromtotoObject.fontSize){animationFromToToConfig.fontSize=animation.fromtotoObject.fontSize}
if(animation.fromtotoObject.fontWeight){animationFromToToConfig.fontWeight=animation.fromtotoObject.fontWeight}
if(animation.fromtotoObject.fontStyle){animationFromToToConfig.fontStyle=animation.fromtotoObject.fontStyle}
if(animation.fromtotoObject.textAlign){animationFromToToConfig.textAlign=animation.fromtotoObject.textAlign}
if(animation.fromtotoObject.textDecoration){animationFromToToConfig.textDecoration=animation.fromtotoObject.textDecoration}
if(animation.fromtotoObject.textTransform){animationFromToToConfig.textTransform=animation.fromtotoObject.textTransform}
if(animation.fromtotoObject.lineHeight){animationFromToToConfig.lineHeight=animation.fromtotoObject.lineHeight}
if(animation.fromtotoObject.letterSpacing){animationFromToToConfig.letterSpacing=animation.fromtotoObject.letterSpacing}
if(animation.fromtotoObject.wordSpacing){animationFromToToConfig.wordSpacing=animation.fromtotoObject.wordSpacing}
if(animation.fromtotoObject.width){animationFromToToConfig.width=animation.fromtotoObject.width}
if(animation.fromtotoObject.height){animationFromToToConfig.height=animation.fromtotoObject.height}
if(animation.fromtotoObject.minWidth){animationFromToToConfig.minWidth=animation.fromtotoObject.minWidth}
if(animation.fromtotoObject.minHeight){animationFromToToConfig.minHeight=animation.fromtotoObject.minHeight}
if(animation.fromtotoObject.maxWidth){animationFromToToConfig.maxWidth=animation.fromtotoObject.maxWidth}
if(animation.fromtotoObject.maxHeight){animationFromToToConfig.maxHeight=animation.fromtotoObject.maxHeight}
if(animation.fromtotoObject.paddingTop){animationFromToToConfig.paddingTop=animation.fromtotoObject.paddingTop}
if(animation.fromtotoObject.paddingBottom){animationFromToToConfig.paddingBottom=animation.fromtotoObject.paddingBottom}
if(animation.fromtotoObject.paddingLeft){animationFromToToConfig.paddingLeft=animation.fromtotoObject.paddingLeft}
if(animation.fromtotoObject.paddingRight){animationFromToToConfig.paddingRight=animation.fromtotoObject.paddingRight}
if(animation.fromtotoObject.marginTop){animationFromToToConfig.marginTop=animation.fromtotoObject.marginTop}
if(animation.fromtotoObject.marginBottom){animationFromToToConfig.marginBottom=animation.fromtotoObject.marginBottom}
if(animation.fromtotoObject.marginLeft){animationFromToToConfig.marginLeft=animation.fromtotoObject.marginLeft}
if(animation.fromtotoObject.marginRight){animationFromToToConfig.marginRight=animation.fromtotoObject.marginRight}
if(animation.fromtotoObject.positionTop){animationFromToToConfig.top=animation.fromtotoObject.positionTop}
if(animation.fromtotoObject.positionBottom){animationFromToToConfig.bottom=animation.fromtotoObject.positionBottom}
if(animation.fromtotoObject.positionLeft){animationFromToToConfig.left=animation.fromtotoObject.positionLeft}
if(animation.fromtotoObject.positionRight){animationFromToToConfig.right=animation.fromtotoObject.positionRight}
if(animation.fromtotoObject.borderColor){animationFromToToConfig.borderColor=animation.fromtotoObject.borderColor}
if(animation.fromtotoObject.borderStyle){animationFromToToConfig.borderStyle=animation.fromtotoObject.borderStyle}
if(animation.fromtotoObject.borderWidthTop){animationFromToToConfig.borderTopWidth=animation.fromtotoObject.borderWidthTop}
if(animation.fromtotoObject.borderWidthBottom){animationFromToToConfig.borderBottomWidth=animation.fromtotoObject.borderWidthBottom}
if(animation.fromtotoObject.borderWidthLeft){animationFromToToConfig.borderLeftWidth=animation.fromtotoObject.borderWidthLeft}
if(animation.fromtotoObject.borderWidthRight){animationFromToToConfig.borderRightWidth=animation.fromtotoObject.borderWidthRight}
if(animation.fromtotoObject.borderTopLeftRadius){animationFromToToConfig.borderTopLeftRadius=animation.fromtotoObject.borderTopLeftRadius}
if(animation.fromtotoObject.borderTopRightRadius){animationFromToToConfig.borderTopRightRadius=animation.fromtotoObject.borderTopRightRadius}
if(animation.fromtotoObject.borderBottomLeftRadius){animationFromToToConfig.borderBottomLeftRadius=animation.fromtotoObject.borderBottomLeftRadius}
if(animation.fromtotoObject.borderBottomRightRadius){animationFromToToConfig.borderBottomRightRadius=animation.fromtotoObject.borderBottomRightRadius}
if(animation.fromtotoObject.boxShadowOffsetX&&animation.fromtotoObject.boxShadowOffsetY&&animation.fromtotoObject.boxShadowBlur&&animation.fromtotoObject.boxShadowSpread&&animation.fromtotoObject.boxShadowColor){var boxShadowProperties={offsetX:animation.fromtotoObject.boxShadowOffsetX,offsetY:animation.fromtotoObject.boxShadowOffsetY,blur:animation.fromtotoObject.boxShadowBlur,spread:animation.fromtotoObject.boxShadowSpread,color:animation.fromtotoObject.boxShadowColor,};animationFromToToConfig.boxShadow=`${boxShadowProperties.offsetX} ${boxShadowProperties.offsetY} ${boxShadowProperties.blur} ${boxShadowProperties.spread} ${boxShadowProperties.color}`}
var filterString="";if(animation.fromtotoObject.filterBlur){filterString+=`blur(${animation.fromtotoObject.filterBlur}) `}
if(animation.fromtotoObject.filterBrightness){filterString+=`brightness(${animation.fromtotoObject.filterBrightness}) `}
if(animation.fromtotoObject.filterContrast){filterString+=`contrast(${animation.fromtotoObject.filterContrast}) `}
if(animation.fromtotoObject.filterGrayscale){filterString+=`grayscale(${animation.fromtotoObject.filterGrayscale}) `}
if(animation.fromtotoObject.filterHueRotate){filterString+=`hue-rotate(${animation.fromtotoObject.filterHueRotate}) `}
if(animation.fromtotoObject.filterInvert){filterString+=`invert(${animation.fromtotoObject.filterInvert}) `}
if(animation.fromtotoObject.filterSaturate){filterString+=`saturate(${animation.fromtotoObject.filterSaturate}) `}
if(animation.fromtotoObject.filterSepia){filterString+=`sepia(${animation.fromtotoObject.filterSepia}) `}
if(filterString!=""){filterString=filterString.trim();animationFromToToConfig.filter=filterString}
if(animation.fromtotoObject.svgFill){animationFromToToConfig.fill=animation.fromtotoObject.svgFill}
if(animation.fromtotoObject.svgStrokeColor){animationFromToToConfig.stroke=animation.fromtotoObject.svgStrokeColor}
if(animation.fromtotoObject.svgStrokeWidth){animationFromToToConfig.strokeWidth=animation.fromtotoObject.svgStrokeWidth}
if(animation.fromtotoObject.customProperties&&animation.fromtotoObject.customValues){const properties=animation.fromtotoObject.customProperties.split("d110708");const values=animation.fromtotoObject.customValues.split("d110708");properties.forEach((property,index)=>{const value=values[index];if(property!==""&&value!==""){animationFromToToConfig[property]=value}})}
var animationFromToFromConfig={};if(animation.fromtofromObject.opacity){animationFromToFromConfig.opacity=animation.fromtofromObject.opacity}
if(animation.fromtofromObject.autoAlpha){animationFromToFromConfig.autoAlpha=animation.fromtofromObject.autoAlpha}
if(animation.fromtofromObject.transformX){animationFromToFromConfig.x=animation.fromtofromObject.transformX}
if(animation.fromtofromObject.transformY){animationFromToFromConfig.y=animation.fromtofromObject.transformY}
if(animation.fromtofromObject.transformScale){animationFromToFromConfig.scale=animation.fromtofromObject.transformScale}
if(animation.fromtofromObject.transformRotate){animationFromToFromConfig.rotation=animation.fromtofromObject.transformRotate}
if(animation.fromtofromObject.transformSkewX){animationFromToFromConfig.skewX=animation.fromtofromObject.transformSkewX}
if(animation.fromtofromObject.transformSkewY){animationFromToFromConfig.skewY=animation.fromtofromObject.transformSkewY}
if(animation.fromtofromObject.background){animationFromToFromConfig.backgroundColor=animation.fromtofromObject.background}
if(animation.fromtofromObject.color){animationFromToFromConfig.color=animation.fromtofromObject.color}
if(animation.fromtofromObject.fontFamily){animationFromToFromConfig.fontFamily=animation.fromtofromObject.fontFamily}
if(animation.fromtofromObject.fontSize){animationFromToFromConfig.fontSize=animation.fromtofromObject.fontSize}
if(animation.fromtofromObject.fontWeight){animationFromToFromConfig.fontWeight=animation.fromtofromObject.fontWeight}
if(animation.fromtofromObject.fontStyle){animationFromToFromConfig.fontStyle=animation.fromtofromObject.fontStyle}
if(animation.fromtofromObject.textAlign){animationFromToFromConfig.textAlign=animation.fromtofromObject.textAlign}
if(animation.fromtofromObject.textDecoration){animationFromToFromConfig.textDecoration=animation.fromtofromObject.textDecoration}
if(animation.fromtofromObject.textTransform){animationFromToFromConfig.textTransform=animation.fromtofromObject.textTransform}
if(animation.fromtofromObject.lineHeight){animationFromToFromConfig.lineHeight=animation.fromtofromObject.lineHeight}
if(animation.fromtofromObject.letterSpacing){animationFromToFromConfig.letterSpacing=animation.fromtofromObject.letterSpacing}
if(animation.fromtofromObject.wordSpacing){animationFromToFromConfig.wordSpacing=animation.fromtofromObject.wordSpacing}
if(animation.fromtofromObject.width){animationFromToFromConfig.width=animation.fromtofromObject.width}
if(animation.fromtofromObject.height){animationFromToFromConfig.height=animation.fromtofromObject.height}
if(animation.fromtofromObject.minWidth){animationFromToFromConfig.minWidth=animation.fromtofromObject.minWidth}
if(animation.fromtofromObject.minHeight){animationFromToFromConfig.minHeight=animation.fromtofromObject.minHeight}
if(animation.fromtofromObject.maxWidth){animationFromToFromConfig.maxWidth=animation.fromtofromObject.maxWidth}
if(animation.fromtofromObject.maxHeight){animationFromToFromConfig.maxHeight=animation.fromtofromObject.maxHeight}
if(animation.fromtofromObject.paddingTop){animationFromToFromConfig.paddingTop=animation.fromtofromObject.paddingTop}
if(animation.fromtofromObject.paddingBottom){animationFromToFromConfig.paddingBottom=animation.fromtofromObject.paddingBottom}
if(animation.fromtofromObject.paddingLeft){animationFromToFromConfig.paddingLeft=animation.fromtofromObject.paddingLeft}
if(animation.fromtofromObject.paddingRight){animationFromToFromConfig.paddingRight=animation.fromtofromObject.paddingRight}
if(animation.fromtofromObject.marginTop){animationFromToFromConfig.marginTop=animation.fromtofromObject.marginTop}
if(animation.fromtofromObject.marginBottom){animationFromToFromConfig.marginBottom=animation.fromtofromObject.marginBottom}
if(animation.fromtofromObject.marginLeft){animationFromToFromConfig.marginLeft=animation.fromtofromObject.marginLeft}
if(animation.fromtofromObject.marginRight){animationFromToFromConfig.marginRight=animation.fromtofromObject.marginRight}
if(animation.fromtofromObject.positionTop){animationFromToFromConfig.top=animation.fromtofromObject.positionTop}
if(animation.fromtofromObject.positionBottom){animationFromToFromConfig.bottom=animation.fromtofromObject.positionBottom}
if(animation.fromtofromObject.positionLeft){animationFromToFromConfig.left=animation.fromtofromObject.positionLeft}
if(animation.fromtofromObject.positionRight){animationFromToFromConfig.right=animation.fromtofromObject.positionRight}
if(animation.fromtofromObject.borderColor){animationFromToFromConfig.borderColor=animation.fromtofromObject.borderColor}
if(animation.fromtofromObject.borderStyle){animationFromToFromConfig.borderStyle=animation.fromtofromObject.borderStyle}
if(animation.fromtofromObject.borderWidthTop){animationFromToFromConfig.borderTopWidth=animation.fromtofromObject.borderWidthTop}
if(animation.fromtofromObject.borderWidthBottom){animationFromToFromConfig.borderBottomWidth=animation.fromtofromObject.borderWidthBottom}
if(animation.fromtofromObject.borderWidthLeft){animationFromToFromConfig.borderLeftWidth=animation.fromtofromObject.borderWidthLeft}
if(animation.fromtofromObject.borderWidthRight){animationFromToFromConfig.borderRightWidth=animation.fromtofromObject.borderWidthRight}
if(animation.fromtofromObject.borderTopLeftRadius){animationFromToFromConfig.borderTopLeftRadius=animation.fromtofromObject.borderTopLeftRadius}
if(animation.fromtofromObject.borderTopRightRadius){animationFromToFromConfig.borderTopRightRadius=animation.fromtofromObject.borderTopRightRadius}
if(animation.fromtofromObject.borderBottomLeftRadius){animationFromToFromConfig.borderBottomLeftRadius=animation.fromtofromObject.borderBottomLeftRadius}
if(animation.fromtofromObject.borderBottomRightRadius){animationFromToFromConfig.borderBottomRightRadius=animation.fromtofromObject.borderBottomRightRadius}
if(animation.fromtofromObject.boxShadowOffsetX&&animation.fromtofromObject.boxShadowOffsetY&&animation.fromtofromObject.boxShadowBlur&&animation.fromtofromObject.boxShadowSpread&&animation.fromtofromObject.boxShadowColor){var boxShadowProperties={offsetX:animation.fromtofromObject.boxShadowOffsetX,offsetY:animation.fromtofromObject.boxShadowOffsetY,blur:animation.fromtofromObject.boxShadowBlur,spread:animation.fromtofromObject.boxShadowSpread,color:animation.fromtofromObject.boxShadowColor,};animationFromToFromConfig.boxShadow=`${boxShadowProperties.offsetX} ${boxShadowProperties.offsetY} ${boxShadowProperties.blur} ${boxShadowProperties.spread} ${boxShadowProperties.color}`}
var filterString="";if(animation.fromtofromObject.filterBlur){filterString+=`blur(${animation.fromtofromObject.filterBlur}) `}
if(animation.fromtofromObject.filterBrightness){filterString+=`brightness(${animation.fromtofromObject.filterBrightness}) `}
if(animation.fromtofromObject.filterContrast){filterString+=`contrast(${animation.fromtofromObject.filterContrast}) `}
if(animation.fromtofromObject.filterGrayscale){filterString+=`grayscale(${animation.fromtofromObject.filterGrayscale}) `}
if(animation.fromtofromObject.filterHueRotate){filterString+=`hue-rotate(${animation.fromtofromObject.filterHueRotate}) `}
if(animation.fromtofromObject.filterInvert){filterString+=`invert(${animation.fromtofromObject.filterInvert}) `}
if(animation.fromtofromObject.filterSaturate){filterString+=`saturate(${animation.fromtofromObject.filterSaturate}) `}
if(animation.fromtofromObject.filterSepia){filterString+=`sepia(${animation.fromtofromObject.filterSepia}) `}
if(filterString!=""){filterString=filterString.trim();animationFromToFromConfig.filter=filterString}
if(animation.fromtofromObject.svgFill){animationFromToFromConfig.fill=animation.fromtofromObject.svgFill}
if(animation.fromtofromObject.svgStrokeColor){animationFromToFromConfig.stroke=animation.fromtofromObject.svgStrokeColor}
if(animation.fromtofromObject.svgStrokeWidth){animationFromToFromConfig.strokeWidth=animation.fromtofromObject.svgStrokeWidth}
if(animation.fromtofromObject.customProperties&&animation.fromtofromObject.customValues){const properties=animation.fromtofromObject.customProperties.split("d110708");const values=animation.fromtofromObject.customValues.split("d110708");properties.forEach((property,index)=>{const value=values[index];if(property!==""&&value!==""){animationFromToFromConfig[property]=value}})}
var iframe=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var elementToAnimate=animation.element;if(elementToAnimate==""){elementToAnimate="this"}
if(animation.splitTextEnabled=="true"){if(self.trigger!=""){if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}
animation.split=new SplitText(iframe.querySelector(`${elementToAnimate}, ${elementToAnimate} *`),{type:animation.splitText,charsClass:`${elementToAnimate}-char nb-animator-char`,wordsClass:`${elementToAnimate}-word nb-animator-word`,linesClass:`${elementToAnimate}-line nb-animator-line`,});animation.isSplitted=!0}}else{if(animation.isSplitted==!0){animation.split.revert();animation.isSplitted=!1}}
if(iframe.querySelector(elementToAnimate)){if(animation.splitTextEnabled=="true"){if(animation.splitText.includes("char")){if(animation.isleftorright=="left"){animation.start=0;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationFromToFromConfig,animationFromToToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-char`),animationFromToFromConfig,animationFromToToConfig,highest)}}else if(animation.splitText.includes("word")){if(animation.isleftorright=="left"){animation.start=0;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationFromToFromConfig,animationFromToToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-word`),animationFromToFromConfig,animationFromToToConfig,highest)}}else if(animation.splitText.includes("line")){if(animation.isleftorright=="left"){animation.start=0;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationFromToFromConfig,animationFromToToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.fromTo(iframe.getElementsByClassName(`${elementToAnimate}-line`),animationFromToFromConfig,animationFromToToConfig,highest)}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.fromTo(iframe.querySelectorAll(elementToAnimate),animationFromToFromConfig,animationFromToToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.fromTo(iframe.querySelectorAll(elementToAnimate),animationFromToFromConfig,animationFromToToConfig,highest)}}}else{if(animation.isleftorright=="left"){animation.start=0;timeline.fromTo(iframe.querySelectorAll(elementToAnimate),animationFromToFromConfig,animationFromToToConfig,0)}else if(animation.isleftorright=="right"){animation.start=highest;timeline.fromTo(iframe.querySelectorAll(elementToAnimate),animationFromToFromConfig,animationFromToToConfig,highest)}}}
break}});self.timelineGSAP=timeline;var renderEnabled=document.querySelector("#nb-ptanimator-settings__switch-render");if(!renderEnabled.checked){self.clearGSAPtimelineStyles(self)}
renderEnabled.addEventListener("click",function(){if(!renderEnabled.checked){self.clearGSAPtimelineStyles(self)}else{self.setThisTimelineAndTimelineView(self)}})}
clearGSAPtimelineStyles(self){if(self.timelineGSAP){self.timelineGSAP.getChildren().forEach(function(animation){gsap.set(animation.targets(),{clearProps:"all"})})}}
timelineViewHTML(self){var timelineView=document.querySelector(".nb-ptanimator__timeline-view");var timelineViewDuration=parseFloat(self.duration)*self.widthPerSecond;var leftAndRightAnimations=self.leftAnimations.concat(self.rightAnimations);var timelineViewDisplay=`
            <div class="nb-ptanimator-timeline-view__top-wrapper">
                <div class="nb-ptanimator-timeline-view__controls">
                    <div class="nb-ptanimator-timeline-view__play"></div>
                    <div class="nb-ptanimator-timeline-view__pause"></div>
                    <div class="nb-ptanimator-timeline-view__restart"></div> 
                </div>
    
                <div class="nb-ptanimator-timeline-view__duration-input">
                    <input spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-timeline-view__timeline-duration" value="${self.duration}">
                </div>
            </div>
            `;timelineViewDisplay+=`
            <div class="nb-ptanimator-timeline-view__bottom-wrapper">
                <div class="nb-ptanimator-timeline-view__scroll-wrapper">
                    <div class="nb-ptanimator-timeline-view__time-markers">`;for(var i=0;i<=parseFloat(self.duration);i++){if(i!=parseFloat(self.duration)){timelineViewDisplay+=`
                            <div class="nb-ptanimator-timeline-view__second-marker">
                                ${i}s
                                <div class="nb-ptanimator-timeline-view__sub-seconds-wrapper">
                                    <div class="nb-ptanimator-timeline-view__sub-second-marker"></div>
                                </div>
                            </div>
                            `}else{timelineViewDisplay+=`
                            <div class="nb-ptanimator-timeline-view__second-marker">
                                ${i}s
                            </div>
                            `}}
timelineViewDisplay+=`</div>`;var draggerHeight=leftAndRightAnimations.length*38;timelineViewDisplay+=`
                        <div class="nb-ptanimator-timeline-view__dragger-track">
                            <div class="nb-ptanimator-timeline-view__dragger">
                                <div style="--dragger-height: ${draggerHeight}px"></div>
                            </div>
                        </div>
                        <div class="nb-ptanimator-timeline-view__scrolling-timelines">
                    `;var animationsCount=leftAndRightAnimations.length;for(var i=1;i<=animationsCount;i++){var animationName;var animationID;var animationElement;var animationPosition;leftAndRightAnimations.forEach(function(animation){if(animation.position==i){animationName=animation.animationName;animationID=animation.id;animationElement=animation.element;animationPosition=animation.isleftorright}});var iframeElement=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var tweenClasses="nb-ptanimator-timeline-view__animation-tween";if(animationElement==""){tweenClasses="nb-ptanimator-timeline-view__animation-tween nb-ptanimator-timeline-view__animation-tween-hidden"}else{if(!iframeElement.querySelector(animationElement)){tweenClasses="nb-ptanimator-timeline-view__animation-tween nb-ptanimator-timeline-view__animation-tween-hidden"}}
timelineViewDisplay+=`
                        <div class="nb-ptanimator-timeline-view__animation-row">
                            <div class="nb-ptanimator-timeline-view__animation-tween ${tweenClasses}" data-animationTween-id="${i}" data-side="${animationPosition}">
    
                                <div class="nb-ptanimator-timeline-view__animation-tween-drag-area">
                                    <span>${animationName}</span>
                                </div>
    
                                <div class="nb-ptanimator-timeline-view__resize-tween"></div>
                            </div>
                        </div>
                        `}
if(animationsCount==0){timelineView.setAttribute("has-animations","false")}else{timelineView.setAttribute("has-animations","true")}
timelineViewDisplay+=`</div></div></div>`;timelineView.innerHTML=timelineViewDisplay}
timelineViewGSAP(self){for(var e=self.timelineGSAP.getChildren(),n=1;n<=e.length;n++){var tween=self.timelineGSAP.getById(n);if(tween){var duration=tween.duration();var repeat=tween.repeat();var totalDuration=duration*(repeat+1);var bar=jQuery(".nb-ptanimator-timeline-view__animation-tween")[n-1];TweenLite.set(bar,{width:totalDuration*self.widthPerSecond,left:tween.startTime()*self.widthPerSecond})}}
var isDragging=!1;var sequenceTrackLength,sequenceDragger;self.timelineGSAP.eventCallback("onUpdate",updateDragger);self.timelineGSAP.eventCallback("onComplete",onCompleteTimeline);sequenceTrackLength=self.timelineGSAP.duration()*self.widthPerSecond;sequenceDragger=jQuery(".nb-ptanimator-timeline-view__dragger");Draggable.create(sequenceDragger,{type:"x",bounds:{minX:0,maxX:sequenceTrackLength},trigger:".nb-ptanimator-timeline-view__dragger div",onDragStart:function(){isDragging=!0},onDragEnd:function(){isDragging=!1},onDrag:function(){self.timelineGSAP.progress(this.x/sequenceTrackLength).pause()},})[0];function updateDragger(){TweenLite.set(sequenceDragger,{x:sequenceTrackLength*self.timelineGSAP.progress()})}
function onCompleteTimeline(){var intervalId=setInterval(function(){if(!isDragging){setTimeout(function(){self.timelineGSAP.progress(0);self.timelineGSAP.pause();var renderEnabled=document.querySelector("#nb-ptanimator-settings__switch-render");if(!renderEnabled.checked){self.clearGSAPtimelineStyles(self)}},1000);clearInterval(intervalId)}},100)}
document.querySelector(".nb-ptanimator-timeline-view__play").onclick=()=>self.timelineGSAP.play();document.querySelector(".nb-ptanimator-timeline-view__pause").onclick=()=>self.timelineGSAP.pause();document.querySelector(".nb-ptanimator-timeline-view__restart").onclick=()=>self.timelineGSAP.restart()}
updateTimelineViewDuration(self){var timelineViewDurationInput=document.querySelector(".nb-ptanimator-timeline-view__timeline-duration");timelineViewDurationInput.addEventListener("change",function(e){self.duration=parseFloat(timelineViewDurationInput.value).toFixed(2);self.setThisTimelineAndTimelineView(self)});var leftAndRightAnimations=self.leftAnimations.concat(self.rightAnimations);leftAndRightAnimations.forEach(function(animation){var sum=parseFloat(animation.duration)+parseFloat(animation.delay)+parseFloat(animation.start);if(sum.toFixed(2)>parseFloat(timelineViewDurationInput.value)){self.duration=parseFloat(sum).toFixed(2);self.setThisTimelineAndTimelineView(self)}})}
updateTweensDurationAndDelayOnResizeAndDrag(self){var tweens=document.querySelectorAll(".nb-ptanimator-timeline-view__animation-tween");tweens.forEach(function(tween){var tweenID=tween.getAttribute("data-animationTween-id");var tweenSide=tween.getAttribute("data-side");updateDurationAndWidthOnResize(tween,tweenID,tweenSide);updateDelayAndLeftOnDrag(tween,tweenID,tweenSide)});function updateDurationAndWidthOnResize(tween,tweenID,tweenSide){var currentResizer=tween.querySelector(".nb-ptanimator-timeline-view__resize-tween");var minimum_size=20;var maximum_size=parseFloat(self.duration)*parseFloat(self.widthPerSecond);let original_width=0;let original_x=0;let original_mouse_x=0;currentResizer.addEventListener("mousedown",function(e){e.stopImmediatePropagation();original_width=parseFloat(getComputedStyle(tween,null).getPropertyValue("width").replace("px",""));original_x=tween.getBoundingClientRect().left;original_mouse_x=e.pageX;window.addEventListener("mousemove",resize);window.addEventListener("mouseup",stopResize)});function resize(e){var width=original_width+(e.pageX-original_mouse_x);if(width>maximum_size){width=maximum_size}
if(width>minimum_size){tween.style.width=width+"px"}
var durationFromWidth=width/self.widthPerSecond;self.leftAnimations.forEach(function(animation){if(animation.position==tweenID&&animation.isleftorright==tweenSide){animation.duration=durationFromWidth;if(animation.isActiveAnimation){var durationInput=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__element-custom-duration");durationInput.value=durationFromWidth.toFixed(2)}}});self.rightAnimations.forEach(function(animation){if(animation.position==tweenID&&animation.isleftorright==tweenSide){animation.duration=durationFromWidth;if(animation.isActiveAnimation){var durationInput=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__element-custom-duration");durationInput.value=durationFromWidth.toFixed(2)}}})}
function stopResize(){window.removeEventListener("mousemove",resize);window.removeEventListener("mouseup",stopResize);self.setThisTimelineAndTimelineView(self)}}
function updateDelayAndLeftOnDrag(tween,tweenID,tweenSide){var rightTrackLength=parseFloat(self.duration)*self.widthPerSecond-parseFloat(getComputedStyle(tween,null).getPropertyValue("width").replace("px",""))-parseFloat(getComputedStyle(tween,null).getPropertyValue("left").replace("px",""));var leftTrackLength=-parseFloat(getComputedStyle(tween,null).getPropertyValue("left").replace("px",""));var tweenDragArea=tween.querySelector(".nb-ptanimator-timeline-view__animation-tween-drag-area");Draggable.create(tween,{type:"x",bounds:{minX:leftTrackLength,maxX:rightTrackLength},trigger:tweenDragArea,onDrag:function(){var moveLeft=this.x+parseFloat(getComputedStyle(tween,null).getPropertyValue("left").replace("px",""));var delayFromLeft=moveLeft/self.widthPerSecond;self.leftAnimations.forEach(function(animation){if(animation.position==tweenID&&animation.isleftorright==tweenSide){animation.delay=delayFromLeft;if(animation.isActiveAnimation){var delayInput=document.querySelector(".nb-ptanimator__left-anim-wrapper .nb-ptanimator-panel__element-custom-delay");delayInput.value=delayFromLeft.toFixed(2)}}});self.rightAnimations.forEach(function(animation){if(animation.position==tweenID&&animation.isleftorright==tweenSide){animation.delay=delayFromLeft;if(animation.isActiveAnimation){var delayInput=document.querySelector(".nb-ptanimator__right-anim-wrapper .nb-ptanimator-panel__element-custom-delay");delayInput.value=delayFromLeft.toFixed(2)}}})},onDragEnd:function(){self.setThisTimelineAndTimelineView(self)},})[0]}}
setTimelineOverflow(){var animator=document.querySelector(".nb-ptanimator__drawer").offsetHeight;var animatorTop=document.querySelector(".nb-ptanimator__top-wrapper").offsetHeight;var animatorMiddle=document.querySelector(".nb-ptanimator__middle-wrapper").offsetHeight;var resizerY=document.querySelector(".nb-ptanimator__resizer-y").offsetHeight;var timelineControls=document.querySelector(".nb-ptanimator-timeline-view__top-wrapper").offsetHeight;var markers=document.querySelector(".nb-ptanimator-timeline-view__time-markers").offsetHeight+parseFloat(window.getComputedStyle(document.querySelector(".nb-ptanimator-timeline-view__time-markers")).marginTop);var availableBottomHeight=parseFloat(animator)-parseFloat(animatorTop)-parseFloat(animatorMiddle);var bottomItemsHeight=parseFloat(resizerY)+parseFloat(timelineControls)+parseFloat(markers);var availableTimelinesHeight=parseFloat(availableBottomHeight)-parseFloat(bottomItemsHeight);var timelineHeight=document.querySelector(".nb-ptanimator-timeline-view__scrolling-timelines");timelineHeight.style.maxHeight=`${availableTimelinesHeight - 4}px`}}
class Animation{parentTimelineObject;animationName;isActiveAnimation;id;isleftorright;animWrapperSelector;position;start;element;duration;delay;easing;staggerEnabled;stagger;splitTextEnabled;splitText;isSplitted;split;repeatEnabled;repeat;yoyoEnabled;method;methodfromto;fromObject;toObject;fromtofromObject;fromtotoObject;constructor({parentTimelineObject,animationName,isActiveAnimation,id,isleftorright,element,duration,delay,easing,staggerEnabled,stagger,splitTextEnabled,splitText,isSplitted,repeatEnabled,repeat,yoyoEnabled,method,methodfromto,fromObject,toObject,fromtofromObject,fromtotoObject,}){this.parentTimelineObject=parentTimelineObject;this.animationName=animationName||"Animation "+id;this.isActiveAnimation=isActiveAnimation||!1;this.id=id;this.isleftorright=isleftorright;if(isleftorright=="left"){this.animWrapperSelector=".nb-ptanimator__left-anim-wrapper"}else if(isleftorright=="right"){this.animWrapperSelector=".nb-ptanimator__right-anim-wrapper"}
this.element=element||"";this.duration=duration||"2";this.delay=delay||"";this.easing=easing||"none";this.staggerEnabled=staggerEnabled||"false";this.stagger=stagger||"0.25";this.repeatEnabled=repeatEnabled||"false";this.repeat=repeat||"3";this.yoyoEnabled=yoyoEnabled||"false";this.splitTextEnabled=splitTextEnabled||"false";this.splitText=splitText||"chars";this.isSplitted="false";this.method=method||"from";this.methodfromto=methodfromto||"fromtofrom";this.fromObject=fromObject||new methodProperties({parentTimelineObject:parentTimelineObject,method:"from",animWrapperSelector:this.animWrapperSelector});this.toObject=toObject||new methodProperties({parentTimelineObject:parentTimelineObject,method:"to",animWrapperSelector:this.animWrapperSelector});this.fromtofromObject=fromtofromObject||new methodProperties({parentTimelineObject:parentTimelineObject,method:"fromtofrom",animWrapperSelector:this.animWrapperSelector});this.fromtotoObject=fromtotoObject||new methodProperties({parentTimelineObject:parentTimelineObject,method:"fromtoto",animWrapperSelector:this.animWrapperSelector})}
animationButtonHTML(){var animationDisplay=`
            <div class="nb-ptanimator-panel__animation" data-active-animation="${this.isActiveAnimation}" data-animation-id="${this.id}">
                <span>${this.animationName}</span>

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="nb-ptanimator__animation-update-name" data-animation-id="${this.id}">
                    <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="nb-ptanimator-panel__delete-animation" data-animation-id="${this.id}" viewBox="0 0 512 512">
                    <path d="M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <rect x="32" y="64" width="448" height="80" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M312 240L200 352M312 352L200 240"/>
                </svg>
            </div>
            `;return animationDisplay}
animationPanelHTML(){var methodsHTML=`
            <div class="nb-ptanimator-panel__method-options">
                <div class="nb-ptanimator-panel__method-from nb-ptanimator-panel__method-event" data-chosen="${this.method === "from"}">From</div>
                <div class="nb-ptanimator-panel__method-to nb-ptanimator-panel__method-event" data-chosen="${this.method === "to"}">To</div>
                <div class="nb-ptanimator-panel__method-fromto nb-ptanimator-panel__method-event" data-chosen="${this.method === "fromto"}">From To</div>
            </div>
            <div class="nb-ptanimator-panel__method-fromto-options" data-show="${this.method === "fromto"}">
                <div class="nb-ptanimator-panel__method-fromto-from nb-ptanimator-panel__method-fromto-event" data-chosen="${this.methodfromto === "fromtofrom"}">From</div>
                <div class="nb-ptanimator-panel__method-fromto-to nb-ptanimator-panel__method-fromto-event" data-chosen="${this.methodfromto === "fromtoto"}">To</div>
            </div>
            `;var methodPropertiesHTML="";if(this.method==="from"){methodPropertiesHTML=this.fromObject.methodPropertiesHTML()}else if(this.method==="to"){methodPropertiesHTML=this.toObject.methodPropertiesHTML()}else if(this.method==="fromto"){if(this.methodfromto==="fromtofrom"){methodPropertiesHTML=this.fromtofromObject.methodPropertiesHTML()}else if(this.methodfromto==="fromtoto"){methodPropertiesHTML=this.fromtotoObject.methodPropertiesHTML()}}
var animationDisplay=`
            <div class="nb-ptanimator-panel__columns">
                <div class="nb-ptanimator-panel__left-column nb-ptanimator-panel__left-column--animation">
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            Element
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--element">i</div>
                        </div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-element" value="${this.element}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                        <div class="nb-ptanimator-panel__select-element-from-iframe"></div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper nb-ptanimator-panel__caption-input-wrapper--2-col">
                        <div class="nb-ptanimator-panel__caption-input-wrapper">
                            <div class="nb-ptanimator-panel__caption">Duration</div>
    
                            <div class="nb-ptanimator-panel__input-wrapper">
                                <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-duration" value="${this.duration}">
                                <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                            </div>
                        </div>
                        <div class="nb-ptanimator-panel__caption-input-wrapper">
                            <div class="nb-ptanimator-panel__caption">Delay</div>
    
                            <div class="nb-ptanimator-panel__input-wrapper">
                                <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-delay" value="${this.delay}">
                                <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">Easing</div>
    
                        <div class="nb-ptanimator-panel__input-wrapper">
                            <input type="hidden" placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-easing" value="${this.easing}">
                            <div class="nb-ptanimator-panel__input-dropdown nb-ptanimator-panel__input-dropdown-into-options">
                                <div class="nb-ptanimator-panel__input-dropdown-option">none</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">power1</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">power2</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">power3</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">power4</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">back</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">bounce</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">circ</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">elastic</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">expo</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">sine</div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">
                            SplitText
                            <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--split-text">i</div>
    
                            <input type="checkbox" class="nb-ptanimator-panel__switch" id="nb-ptanimator-panel__switch-split-text-${this.isleftorright}"/>
                            <label for="nb-ptanimator-panel__switch-split-text-${this.isleftorright}">SplitText</label>
                        </div>

                        <div class="nb-ptanimator-panel__input-wrapper nb-ptanimator-panel__element-custom-input-toggle-dropdown" data-show="${this.splitTextEnabled}">
                            <input type="hidden" placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-input-switch nb-ptanimator-panel__element-custom-split-text" value="${this.splitText}">
                            <div class="nb-ptanimator-panel__input-dropdown nb-ptanimator-panel__input-dropdown-into-options nb-ptanimator-panel__input-dropdown-multi">
                                <div class="nb-ptanimator-panel__input-dropdown-option">lines</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">words</div>
                                <div class="nb-ptanimator-panel__input-dropdown-option">chars</div>
                            </div>
                        </div>
                    </div>

                    <div class="nb-ptanimator-panel__caption-input-wrapper nb-ptanimator-panel__caption-input-wrapper--2-col">
                        <div class="nb-ptanimator-panel__caption-input-wrapper">
                            <div class="nb-ptanimator-panel__caption">
                                Stagger
                                <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--stagger">i</div>
    
                                <input type="checkbox" class="nb-ptanimator-panel__switch" id="nb-ptanimator-panel__switch-stagger-${this.isleftorright}"/>
                                <label for="nb-ptanimator-panel__switch-stagger-${this.isleftorright}">Toggle</label>
                            </div>
    
                            <div class="nb-ptanimator-panel__input-wrapper">
                                <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-input-switch nb-ptanimator-panel__element-custom-stagger" data-show="${this.staggerEnabled}" value="${this.stagger}">
                                <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                            </div>
                        </div>
                        <div class="nb-ptanimator-panel__caption-input-wrapper">
                            <div class="nb-ptanimator-panel__caption">
                                Repeat
                                <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--repeat">i</div>
    
                                <input type="checkbox" class="nb-ptanimator-panel__switch" id="nb-ptanimator-panel__switch-repeat-${this.isleftorright}"/>
                                <label for="nb-ptanimator-panel__switch-repeat-${this.isleftorright}">Repeat</label>
                            </div>
    
                            <div class="nb-ptanimator-panel__input-wrapper">
                                <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__element-custom-input-switch nb-ptanimator-panel__element-custom-repeat" data-show="${this.repeatEnabled}" value="${this.repeat}">
                                <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__caption-input-wrapper nb-ptanimator-panel__caption-input-wrapper--2-col nb-ptanimator-panel__caption-input-wrapper--yoyo">
                        <div class="nb-ptanimator-panel__caption-input-wrapper">
                            <div class="nb-ptanimator-panel__caption">
                                Yoyo
                                <div class="nb-ptanimator-panel__info nb-ptanimator-panel__info--yoyo">i</div>
    
                                <input type="checkbox" class="nb-ptanimator-panel__switch" id="nb-ptanimator-panel__switch-yoyo-${this.isleftorright}"/>
                                <label for="nb-ptanimator-panel__switch-yoyo-${this.isleftorright}">Toggle</label>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__right-column">
                    <div class="nb-ptanimator-panel__caption-input-wrapper">
                        <div class="nb-ptanimator-panel__caption">Method</div>
                        ${methodsHTML}
                        <div class="nb-ptanimator-panel__method-properties">
                            ${methodPropertiesHTML}
                        </div>
                    </div>
                </div>
            </div>
            `;return animationDisplay}
updateAnimationName(self){var animationIconUpdateName=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator__animation-update-name[data-animation-id="${this.id}"]`);animationIconUpdateName.addEventListener("click",function(e){var animationTitleElement=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__animation-title`);var animationPreview=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__animation-active-preview-span`);e.stopImmediatePropagation();e.preventDefault();var animationsAtTimeline=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__animation`);animationsAtTimeline.forEach(function(animationAtTimeline){if(animationAtTimeline.getAttribute("data-animation-id")==self.id){var animationSpan=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__animation[data-animation-id=${CSS.escape(String(self.id))}] span`);animationSpan.contentEditable=!0;animationSpan.focus();var range,selection;if(window.getSelection&&document.createRange){selection=window.getSelection();range=document.createRange();range.selectNodeContents(animationSpan);selection.removeAllRanges();selection.addRange(range)}else if(document.selection&&document.body.createTextRange){range=document.body.createTextRange();range.moveToElementText(animationSpan);range.select()}
animationSpan.addEventListener("input",function(){const newName=animationSpan.textContent.trim();if(self.isActiveAnimation){animationTitleElement.firstChild.textContent=newName;animationPreview.firstChild.textContent=newName}});animationSpan.addEventListener("blur",function(){const newName=animationSpan.textContent.trim();self.animationName=newName;animationSpan.contentEditable=!1});animationSpan.addEventListener("keydown",function(event){if(event.key==="Enter"){event.preventDefault();animationSpan.blur()}})}})})}
initOptions(){var self=this;this.setMethodEvent(self);this.setInitSwitchesCheckedValues(self);this.startInputsAndDropdowns(self);this.cursorIdClassSelector(self);this.loadAnimationTippys(self)}
setMethodEvent(self){var from=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-from`);var to=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-to`);var fromto=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto`);var fromtoOptions=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto-options`);var fromtofrom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto-from`);var fromtoto=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto-to`);var methodPropertiesWrapper=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-properties`);from.addEventListener("click",function(){from.setAttribute("data-chosen","true");to.setAttribute("data-chosen","false");fromto.setAttribute("data-chosen","false");fromtoOptions.setAttribute("data-show","false");self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);methodPropertiesWrapper.innerHTML=self.fromObject.methodPropertiesHTML();self.fromObject.initOptions()});to.addEventListener("click",function(){to.setAttribute("data-chosen","true");from.setAttribute("data-chosen","false");fromto.setAttribute("data-chosen","false");fromtoOptions.setAttribute("data-show","false");self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);methodPropertiesWrapper.innerHTML=self.toObject.methodPropertiesHTML();self.toObject.initOptions()});fromto.addEventListener("click",function(){fromto.setAttribute("data-chosen","true");fromtoOptions.setAttribute("data-show","true");from.setAttribute("data-chosen","false");to.setAttribute("data-chosen","false");self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);if(self.methodfromto=="fromtofrom"){methodPropertiesWrapper.innerHTML=self.fromtofromObject.methodPropertiesHTML();self.fromtofromObject.initOptions()}else if(self.methodfromto=="fromtoto"){methodPropertiesWrapper.innerHTML=self.fromtotoObject.methodPropertiesHTML();self.fromtotoObject.initOptions()}});fromtofrom.addEventListener("click",function(){fromtofrom.setAttribute("data-chosen","true");fromtoto.setAttribute("data-chosen","false");self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);methodPropertiesWrapper.innerHTML=self.fromtofromObject.methodPropertiesHTML();self.fromtofromObject.initOptions()});fromtoto.addEventListener("click",function(){fromtoto.setAttribute("data-chosen","true");fromtofrom.setAttribute("data-chosen","false");self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);methodPropertiesWrapper.innerHTML=self.fromtotoObject.methodPropertiesHTML();self.fromtotoObject.initOptions()})}
setInitSwitchesCheckedValues(self){var checkboxStagger=document.getElementById(`nb-ptanimator-panel__switch-stagger-${this.isleftorright}`);var checkboxRepeat=document.getElementById(`nb-ptanimator-panel__switch-repeat-${this.isleftorright}`);var checkboxYoyo=document.getElementById(`nb-ptanimator-panel__switch-yoyo-${this.isleftorright}`);var checkboxSplitText=document.getElementById(`nb-ptanimator-panel__switch-split-text-${this.isleftorright}`);if(self.staggerEnabled=="true"){checkboxStagger.checked=!0}else{checkboxStagger.removeAttribute("checked")}
if(self.repeatEnabled=="true"){checkboxRepeat.checked=!0;document.querySelector(".nb-ptanimator-panel__left-column--animation").setAttribute("data-repeat","true")}else{checkboxRepeat.removeAttribute("checked");document.querySelector(".nb-ptanimator-panel__left-column--animation").setAttribute("data-repeat","false")}
if(self.yoyoEnabled=="true"){checkboxYoyo.checked=!0}else{checkboxYoyo.removeAttribute("checked")}
if(self.splitTextEnabled=="true"){checkboxSplitText.checked=!0}else{checkboxSplitText.removeAttribute("checked")}}
startInputsAndDropdowns(self){var checkboxSwitchs=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__switch`);checkboxSwitchs.forEach(function(checkboxSwitch){if(checkboxSwitch){var captionInputWrapper=checkboxSwitch.closest(".nb-ptanimator-panel__caption-input-wrapper");var inputSwitch=captionInputWrapper.querySelector(".nb-ptanimator-panel__element-custom-input-switch");var inputSwitchDropdown=captionInputWrapper.querySelector(".nb-ptanimator-panel__element-custom-input-toggle-dropdown");checkboxSwitch.addEventListener("click",function(){if(inputSwitch){if(checkboxSwitch.checked){inputSwitch.setAttribute("data-show","true")}else{inputSwitch.setAttribute("data-show","false")}}
if(inputSwitchDropdown){if(checkboxSwitch.checked){inputSwitchDropdown.setAttribute("data-show","true")}else{inputSwitchDropdown.setAttribute("data-show","false")}}
self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}});var inputWrappers=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__input-wrapper`);inputWrappers.forEach(function(inputWrapper){var dropdownButton=inputWrapper.querySelector(".nb-ptanimator-panel__input-dropdown-button");var dropdown=inputWrapper.querySelector(".nb-ptanimator-panel__input-dropdown");var input=inputWrapper.querySelector(".nb-ptanimator-panel__input");if(input){input.addEventListener("change",function(e){e.stopImmediatePropagation();self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)});if(dropdown){input.addEventListener("click",function(){dropdown.setAttribute("data-show","false")})}}
if(dropdownButton){dropdownButton.addEventListener("click",function(event){event.stopImmediatePropagation();if(dropdown.getAttribute("data-show")==="true"){dropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}else{dropdown.setAttribute("data-show","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!dropdown.contains(event.target)){dropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}}}
if(dropdown){var dropdownOptions=dropdown.querySelectorAll(".nb-ptanimator-panel__input-dropdown-option");dropdownOptions.forEach(function(dropdownOption){if(dropdownOption){dropdownOption.addEventListener("click",function(){dropdown.setAttribute("data-show","false");input.value=dropdownOption.innerHTML;self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}})}
if(dropdown){var dropdownOptions=dropdown.querySelectorAll(".nb-ptanimator-panel__input-dropdown-option");dropdownOptions.forEach(function(dropdownOption){if(dropdownOption&&dropdown.classList.contains("nb-ptanimator-panel__input-dropdown-multi")){if(input.value.includes(dropdownOption.textContent)){dropdownOption.classList.add("nb-ptanimator-panel__input-dropdown-option--active")}
dropdownOption.addEventListener("click",function(){dropdown.setAttribute("data-show","false");const option=dropdownOption.innerHTML;const currentValue=input.value;let newValue;if(dropdownOption.classList.contains("nb-ptanimator-panel__input-dropdown-option--active")){dropdownOption.classList.remove("nb-ptanimator-panel__input-dropdown-option--active");newValue=currentValue.replace(option,"").trim();newValue=newValue.replace(/\s+/g," ")}else{dropdownOption.classList.add("nb-ptanimator-panel__input-dropdown-option--active");if(currentValue.includes(option)){newValue=currentValue}else{newValue=currentValue?`${currentValue} ${option}`:option}}
input.value=newValue;self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}else if(dropdownOption){if(dropdownOption.textContent==input.value){dropdownOption.classList.add("nb-ptanimator-panel__input-dropdown-option--active")}
dropdownOption.addEventListener("click",function(){dropdown.setAttribute("data-show","false");dropdownOptions.forEach(function(dropdownOption){dropdownOption.classList.remove("nb-ptanimator-panel__input-dropdown-option--active")});dropdownOption.classList.add("nb-ptanimator-panel__input-dropdown-option--active");input.value=dropdownOption.innerHTML;self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}})}
var dot=inputWrapper.querySelector(".nb-ptanimator-panel__dot-input-indicator");if(dot){dot.addEventListener("click",function(){if(input){input.value=""}
self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}})}
getInputValuesAndSetTimelineVariables(self){var from=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-from`);var to=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-to`);var fromto=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto`);var fromtofrom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto-from`);var fromtoto=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-fromto-to`);if(from.getAttribute("data-chosen")=="true"){self.method="from"}else if(to.getAttribute("data-chosen")=="true"){self.method="to"}else if(fromto.getAttribute("data-chosen")=="true"){self.method="fromto"}
if(fromtofrom.getAttribute("data-chosen")=="true"){self.methodfromto="fromtofrom"}else if(fromtoto.getAttribute("data-chosen")=="true"){self.methodfromto="fromtoto"}
var element=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-element`);if(element){self.element=element.value}
var duration=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-duration`);if(duration){self.duration=duration.value}
var delay=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-delay`);if(delay){self.delay=delay.value}
var easing=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-easing`);if(easing){self.easing=easing.value}
var staggerEnabled=document.querySelector(`${self.animWrapperSelector} #nb-ptanimator-panel__switch-stagger-${this.isleftorright}`);if(staggerEnabled.checked){self.staggerEnabled="true"}else{self.staggerEnabled="false"}
var stagger=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-stagger`);if(stagger){self.stagger=stagger.value}
var repeatEnabled=document.querySelector(`${self.animWrapperSelector} #nb-ptanimator-panel__switch-repeat-${this.isleftorright}`);if(repeatEnabled.checked){self.repeatEnabled="true";document.querySelector(".nb-ptanimator-panel__left-column--animation").setAttribute("data-repeat","true")}else{self.repeatEnabled="false";document.querySelector(".nb-ptanimator-panel__left-column--animation").setAttribute("data-repeat","false")}
var repeat=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-repeat`);if(repeat){self.repeat=repeat.value}
var yoyoEnabled=document.querySelector(`${self.animWrapperSelector} #nb-ptanimator-panel__switch-yoyo-${this.isleftorright}`);if(yoyoEnabled.checked){self.yoyoEnabled="true"}else{self.yoyoEnabled="false"}
var splitTextEnabled=document.querySelector(`${self.animWrapperSelector} #nb-ptanimator-panel__switch-split-text-${this.isleftorright}`);if(splitTextEnabled.checked){self.splitTextEnabled="true"}else{self.splitTextEnabled="false"}
var splitText=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__element-custom-split-text`);if(splitText){self.splitText=splitText.value}}
cursorIdClassSelector(self){var iframe=document.getElementById("bricks-builder-iframe").contentWindow.document.querySelector(".iframe");var preview=document.getElementById("bricks-preview");var cursorDiv=document.querySelector(".nb-pt-selector-cursor");function moveCircle(e){gsap.to(cursorDiv,0,{css:{left:e.clientX+preview.offsetLeft,top:e.clientY+preview.offsetTop}})}
const targetTriggerSelector=document.querySelector(`.nb-ptanimator__${this.isleftorright}-anim-wrapper .nb-ptanimator-panel__select-element-from-iframe`);const targetTrigger=document.querySelector(`.nb-ptanimator__${this.isleftorright}-anim-wrapper .nb-ptanimator-panel__element-custom-element`);let moving=!1;let clicked=!1;targetTriggerSelector.addEventListener("click",handleClick);function handleClick(event){var targets=iframe.querySelectorAll("*");if(!moving){moving=!0;clicked=!1;brickscore_selectorLogic(event,targetTrigger,targetTriggerSelector,targets)}else if(moving){targetTriggerSelector.classList.remove("bc-ptanimator__selector--selecting");moving=!1;clicked=!0;cursorDiv.style.display="none";iframe.removeEventListener("mousemove",moveCircle);for(let i=0;i<targets.length;i++){targets[i].removeEventListener("mousemove",mousemoveHandler);targets[i].removeEventListener("mouseleave",mouseleaveHandler);targets[i].removeEventListener("mousedown",mousedownHandler)}}}
function brickscore_selectorLogic(event,targetinput,targetSelector,targets){targetSelector.classList.add("bc-ptanimator__selector--selecting");if(!clicked){event.stopImmediatePropagation();iframe.addEventListener("mousemove",moveCircle);for(let i=0;i<targets.length;i++){targets[i].addEventListener("mousemove",mousemoveHandler);targets[i].addEventListener("mouseleave",mouseleaveHandler);targets[i].addEventListener("mousedown",(e)=>mousedownHandler(e,targetinput,targetSelector,targets))}}}
function mousemoveHandler(event){if(!clicked){var validId=firstAncestorWithId(event.target);if(validId){cursorDiv.style.display="block";cursorDiv.innerHTML="#"+validId}}}
function mouseleaveHandler(event){cursorDiv.style.display="none"}
function mousedownHandler(event,targetinput,targetSelector,targets){if(!clicked){var validId=firstAncestorWithId(event.target);if(validId){targetSelector.classList.remove("bc-ptanimator__selector--selecting");targetinput.value="#"+validId;targetinput.setAttribute("value",targetinput.value);moving=!1;clicked=!0;cursorDiv.style.display="none";self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject);iframe.addEventListener("mousemove",moveCircle);for(let i=0;i<targets.length;i++){targets[i].removeEventListener("mousemove",mousemoveHandler);targets[i].removeEventListener("mouseleave",mouseleaveHandler);targets[i].removeEventListener("mousedown",(e)=>mousedownHandler(e,targetinput,targetSelector,targets))}}}}
function firstAncestorWithId(element){while(element){if(element.id){if(element.id==="brx-content"){return null}
return element.id}
element=element.parentElement}
return null}}
loadAnimationTippys(self){tippy(document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__info--element`),{allowHTML:!0,content:`The element that will receive the animation.`,theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(`${self.animWrapperSelector}`),});tippy(document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__info--split-text`),{allowHTML:!0,content:"Split the element to animate into lines, words or chars. The animation will be applied to the splitted elements, from bigger priority (chars) to lower (lines). Use the classes nb-animator-char, nb-animator-word or nb-animator-line to target already splitted elements.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(`${self.animWrapperSelector}`),});tippy(document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__info--stagger`),{allowHTML:!0,content:"To set an animation delay between elements with the same selector.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(`${self.animWrapperSelector}`),});tippy(document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__info--repeat`),{allowHTML:!0,content:"The number of times that the animation should repeat after its first iteration.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(`${self.animWrapperSelector}`),});tippy(document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__info--yoyo`),{allowHTML:!0,content:"Causes the tween to go back and forth, alternating backward and forward on each repeat.",theme:"custom",arrow:!0,interactive:!0,inertia:!1,maxWidth:"250px",width:"fit-content",animation:"scale",duration:200,appendTo:document.querySelector(`${self.animWrapperSelector}`),})}}
class methodProperties{parentTimelineObject;method;animWrapperSelector;opacity;autoAlpha;transformX;transformY;transformScale;transformRotate;transformSkewX;transformSkewY;background;color;fontFamily;fontSize;fontWeight;fontStyle;textAlign;textDecoration;textTransform;lineHeight;letterSpacing;wordSpacing;width;height;minWidth;minHeight;maxWidth;maxHeight;paddingTop;paddingBottom;paddingLeft;paddingRight;marginTop;marginBottom;marginLeft;marginRight;positionTop;positionBottom;positionLeft;positionRight;borderColor;borderStyle;borderWidthTop;borderWidthBottom;borderWidthLeft;borderWidthRight;borderTopLeftRadius;borderTopRightRadius;borderBottomLeftRadius;borderBottomRightRadius;boxShadowOffsetX;boxShadowOffsetY;boxShadowBlur;boxShadowSpread;boxShadowColor;filterBlur;filterBrightness;filterContrast;filterGrayscale;filterHueRotate;filterInvert;filterSaturate;filterSepia;svgFill;svgStrokeColor;svgStrokeWidth;customProperties;customValues;constructor({parentTimelineObject,method,animWrapperSelector,opacity,autoAlpha,transformX,transformY,transformScale,transformRotate,transformSkewX,transformSkewY,background,color,fontFamily,fontSize,fontWeight,fontStyle,textAlign,textDecoration,textTransform,lineHeight,letterSpacing,wordSpacing,width,height,minWidth,minHeight,maxWidth,maxHeight,paddingTop,paddingBottom,paddingLeft,paddingRight,marginTop,marginBottom,marginLeft,marginRight,positionTop,positionBottom,positionLeft,positionRight,borderColor,borderWidthTop,borderWidthBottom,borderWidthLeft,borderWidthRight,borderStyle,borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius,boxShadowOffsetX,boxShadowOffsetY,boxShadowBlur,boxShadowSpread,boxShadowColor,filterBlur,filterBrightness,filterContrast,filterGrayscale,filterHueRotate,filterInvert,filterSaturate,filterSepia,svgFill,svgStrokeColor,svgStrokeWidth,customProperties,customValues,}){this.parentTimelineObject=parentTimelineObject;this.method=method;this.animWrapperSelector=animWrapperSelector;this.opacity=opacity||"";this.autoAlpha=autoAlpha||"";this.transformX=transformX||"";this.transformY=transformY||"";this.transformScale=transformScale||"";this.transformRotate=transformRotate||"";this.transformSkewX=transformSkewX||"";this.transformSkewY=transformSkewY||"";this.background=background||"";this.color=color||"";this.fontFamily=fontFamily||"";this.fontSize=fontSize||"";this.fontWeight=fontWeight||"";this.fontStyle=fontStyle||"";this.textAlign=textAlign||"";this.textDecoration=textDecoration||"";this.textTransform=textTransform||"";this.lineHeight=lineHeight||"";this.letterSpacing=letterSpacing||"";this.wordSpacing=wordSpacing||"";this.width=width||"";this.height=height||"";this.minWidth=minWidth||"";this.minHeight=minHeight||"";this.maxWidth=maxWidth||"";this.maxHeight=maxHeight||"";this.paddingTop=paddingTop||"";this.paddingBottom=paddingBottom||"";this.paddingLeft=paddingLeft||"";this.paddingRight=paddingRight||"";this.marginTop=marginTop||"";this.marginBottom=marginBottom||"";this.marginLeft=marginLeft||"";this.marginRight=marginRight||"";this.positionTop=positionTop||"";this.positionBottom=positionBottom||"";this.positionLeft=positionLeft||"";this.positionRight=positionRight||"";this.borderColor=borderColor||"";this.borderStyle=borderStyle||"";this.borderWidthTop=borderWidthTop||"";this.borderWidthBottom=borderWidthBottom||"";this.borderWidthLeft=borderWidthLeft||"";this.borderWidthRight=borderWidthRight||"";this.borderTopLeftRadius=borderTopLeftRadius||"";this.borderTopRightRadius=borderTopRightRadius||"";this.borderBottomLeftRadius=borderBottomLeftRadius||"";this.borderBottomRightRadius=borderBottomRightRadius||"";this.boxShadowOffsetX=boxShadowOffsetX||"";this.boxShadowOffsetY=boxShadowOffsetY||"";this.boxShadowBlur=boxShadowBlur||"";this.boxShadowSpread=boxShadowSpread||"";this.boxShadowColor=boxShadowColor||"";this.filterBlur=filterBlur||"";this.filterBrightness=filterBrightness||"";this.filterContrast=filterContrast||"";this.filterGrayscale=filterGrayscale||"";this.filterHueRotate=filterHueRotate||"";this.filterInvert=filterInvert||"";this.filterSaturate=filterSaturate||"";this.filterSepia=filterSepia||"";this.svgFill=svgFill||"";this.svgStrokeColor=svgStrokeColor||"";this.svgStrokeWidth=svgStrokeWidth||"";this.customProperties=customProperties||"";this.customValues=customValues||""}
methodPropertiesHTML(){var propertiesSpan=this.method;if(propertiesSpan=="fromtofrom"){propertiesSpan="from"}else if(propertiesSpan=="fromtoto"){propertiesSpan="to"}
const includeColorValue=this.color!==""?`value="${this.color}"`:"";const includeBackgroundValue=this.background!==""?`value="${this.background}"`:"";const includeBorderColorValue=this.borderColor!==""?`value="${this.borderColor}"`:"";const includeBoxShadowColorValue=this.boxShadowColor!==""?`value="${this.boxShadowColor}"`:"";const includeSvgFillValue=this.svgFill!==""?`value="${this.svgFill}"`:"";const includeSvgStrokeColorValue=this.svgStrokeColor!==""?`value="${this.svgStrokeColor}"`:"";var methodPropertiesDisplay=`
                <div class="nb-ptanimator-panel__method-properties-title">
                    Properties
                    <div class="nb-ptanimator-panel__method-properties-span">${propertiesSpan}</div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Visibility</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Opacity</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-opacity" value="${this.opacity}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Auto alpha</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-autoAlpha" value="${this.autoAlpha}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Transform</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Translate X</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformX" value="${this.transformX}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Translate Y</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformY" value="${this.transformY}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Scale</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformScale" value="${this.transformScale}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Rotate</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformRotate" value="${this.transformRotate}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Skew X</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformSkewX" value="${this.transformSkewX}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Skew Y</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-transformSkewY" value="${this.transformSkewY}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Color</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Background color</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                                    <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeBackgroundValue}>
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-background" ${includeBackgroundValue}>
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Color</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                                    <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeColorValue}>
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-color" ${includeColorValue}>
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Typography</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Font family</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-fontFamily" value="${this.fontFamily}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Arial</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Helvetica</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Helvetica Neue</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Times New Roman</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Times</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Georgia</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">Courier New</div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Font size</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-fontSize" value="${this.fontSize}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Font weight</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-fontWeight" value="${this.fontWeight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">100</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">200</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">300</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">400</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">500</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">600</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">700</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">800</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">900</div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Font style</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-fontStyle" value="${this.fontStyle}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">normal</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">italic</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">oblique</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Text align</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-textAlign" value="${this.textAlign}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">left</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">right</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">center</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">justify</div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Text decoration</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-textDecoration" value="${this.textDecoration}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">overline</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">line-through</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">underline</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Text transform</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-textTransform" value="${this.textTransform}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">none</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">capitalize</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">uppercase</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">lowercase</div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Line height</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-lineHeight" value="${this.lineHeight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Letter spacing</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-letterSpacing" value="${this.letterSpacing}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Word spacing</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-wordSpacing" value="${this.wordSpacing}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Dimensions</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Width</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-width" value="${this.width}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Height</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-height" value="${this.height}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Min. width</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-minWidth" value="${this.minWidth}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Min. height</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-minHeight" value="${this.minHeight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Max. width</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-maxWidth" value="${this.maxWidth}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Max. height</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-maxHeight" value="${this.maxHeight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Spacing</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Padding</div>
    
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-paddingTop" value="${this.paddingTop}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-paddingBottom" value="${this.paddingBottom}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-paddingLeft" value="${this.paddingLeft}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-paddingRight" value="${this.paddingRight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Margin</div>
    
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-marginTop" value="${this.marginTop}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-marginBottom" value="${this.marginBottom}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-marginLeft" value="${this.marginLeft}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-marginRight" value="${this.marginRight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Position</div>
    
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-positionTop" value="${this.positionTop}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-positionBottom" value="${this.positionBottom}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-positionLeft" value="${this.positionLeft}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-positionRight" value="${this.positionRight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Border</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Color</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                                    <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeBorderColorValue}>
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-borderColor" ${includeBorderColorValue}>
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Border style</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderStyle" value="${this.borderStyle}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                    <div class="nb-ptanimator-panel__input-dropdown-button"><div class="nb-ptanimator-panel__input-dropdown-icon"></div></div>
                                    <div class="nb-ptanimator-panel__input-dropdown">
                                        <div class="nb-ptanimator-panel__input-dropdown-option">none</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">hidden</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">dotted</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">dashed</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">solid</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">double</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">groove</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">ridge</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">inset</div>
                                        <div class="nb-ptanimator-panel__input-dropdown-option">outset</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Width</div>
    
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderWidthTop" value="${this.borderWidthTop}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderWidthBottom" value="${this.borderWidthBottom}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderWidthLeft" value="${this.borderWidthLeft}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderWidthRight" value="${this.borderWidthRight}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Radius</div>
    
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderTopLeftRadius" value="${this.borderTopLeftRadius}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Top right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderTopRightRadius" value="${this.borderTopRightRadius}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom left</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderBottomLeftRadius" value="${this.borderBottomLeftRadius}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Bottom right</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-borderBottomRightRadius" value="${this.borderBottomRightRadius}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Shadow</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Offset X</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-boxShadowOffsetX" value="${this.boxShadowOffsetX}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Offset Y</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-boxShadowOffsetY" value="${this.boxShadowOffsetY}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Blur</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-boxShadowBlur" value="${this.boxShadowBlur}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Spread</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-boxShadowSpread" value="${this.boxShadowSpread}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Color</div>
    
                        <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                            <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeBoxShadowColorValue}>
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-boxShadowColor" ${includeBoxShadowColorValue}>
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Filter</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Blur</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterBlur" value="${this.filterBlur}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Brightness</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterBrightness" value="${this.filterBrightness}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Contrast</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterContrast" value="${this.filterContrast}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Grayscale</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterGrayscale" value="${this.filterGrayscale}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Hue rotate</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterHueRotate" value="${this.filterHueRotate}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Invert</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterInvert" value="${this.filterInvert}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Saturate</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterSaturate" value="${this.filterSaturate}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Sepia</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper">
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-filterSepia" value="${this.filterSepia}">
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="nb-ptanimator-panel__method-property-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">SVG</div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-property--2-col">
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Fill</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                                    <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeSvgFillValue}>
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-svgFill" ${includeSvgFillValue}>
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
    
                            <div class="nb-ptanimator-panel__method-property-col-wrapper">
                                <div class="nb-ptanimator-panel__method-caption">Stroke color</div>
    
                                <div class="nb-ptanimator-panel__method-input-wrapper nb-ptanimator-panel__input-type-color-wrapper">
                                    <input type="color" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color" ${includeSvgStrokeColorValue}>
                                    <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__input-type-color-value nb-ptanimator-panel__method-property-svgStrokeColor" ${includeSvgStrokeColorValue}>
                                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="nb-ptanimator-panel__method-property">
                        <div class="nb-ptanimator-panel__method-caption">Stroke width</div>
    
                        <div class="nb-ptanimator-panel__method-input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-svgStrokeWidth" value="${this.svgStrokeWidth}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                </div>

                <div class="nb-ptanimator-panel__method-property-wrapper nb-ptanimator-panel__method-custom-properties-wrapper" data-collapse="true">
                    <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                    <div class="nb-ptanimator-panel__method-property-label">Custom</div>

                    <div class="nb-ptanimator-panel__properties-wrapper"></div>

                    <!-- Custom properties added at assignCustomPropertiesAndValues(self) -->
                    <div class="nb-ptanimator-panel__method-property-add-custom-property">+</div>
                </div>
            `;return methodPropertiesDisplay}
initOptions(){var self=this;this.assignCustomPropertiesAndValues(self);this.expandPropertiesLogic(self);this.startInputsAndDropdowns(self)}
assignCustomPropertiesAndValues(self){const customPropertiesWrapper=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__properties-wrapper`);const customPropertiesArray=self.customProperties.split("d110708");const customValuesArray=self.customValues.split("d110708");customPropertiesArray.forEach((property,index)=>{const propertyElement=document.createElement("div");propertyElement.className="nb-ptanimator-panel__method-property";if(property=="blank"){property=""}
let propertyValue=property||"";let valueValue=customValuesArray[index]||"";if(valueValue=="blank"){valueValue=""}
propertyElement.innerHTML=`
                <div class="nb-ptanimator-panel__method-property--2-col nb-ptanimator-panel__method-property--custom-property">
                    <div class="nb-ptanimator-panel__method-property-col-wrapper">
                        <div class="nb-ptanimator-panel__method-caption">Property</div>
                        <div class="nb-ptanimator-panel__method-input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-property" value="${propertyValue}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                    <div class="nb-ptanimator-panel__method-property-col-wrapper">
                        <div class="nb-ptanimator-panel__method-caption">Value</div>
                        <div class="nb-ptanimator-panel__method-input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-value" value="${valueValue}">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                    <svg class="nb-ptanimator__delete-property" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512" fill="none">
                        <path d="M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                        <rect x="32" y="64" width="448" height="80" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M312 240L200 352M312 352L200 240"/>
                    </svg>
                </div>
                `;propertyElement.querySelector(".nb-ptanimator__delete-property").addEventListener("click",function(){const customPropertyElement=this.closest(".nb-ptanimator-panel__method-property");if(customPropertyElement){customPropertyElement.remove();self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)}});customPropertiesWrapper.appendChild(propertyElement)});document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-add-custom-property`).addEventListener("click",function(){const propertyElement=document.createElement("div");propertyElement.className="nb-ptanimator-panel__method-property";propertyElement.innerHTML=`
                <div class="nb-ptanimator-panel__method-property--2-col nb-ptanimator-panel__method-property--custom-property">
                    <div class="nb-ptanimator-panel__method-property-col-wrapper">
                        <div class="nb-ptanimator-panel__method-caption">Property</div>
                        <div class="nb-ptanimator-panel__method-input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-property" value="">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                    <div class="nb-ptanimator-panel__method-property-col-wrapper">
                        <div class="nb-ptanimator-panel__method-caption">Value</div>
                        <div class="nb-ptanimator-panel__method-input-wrapper">
                            <input placeholder="" spellcheck="false" class="nb-ptanimator-panel__input nb-ptanimator-panel__method-property-value" value="">
                            <span class="nb-ptanimator-panel__dot-input-indicator"></span>
                        </div>
                    </div>
                    <svg class="nb-ptanimator__delete-property" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512" fill="none">
                        <path d="M432 144l-28.67 275.74A32 32 0 01371.55 448H140.46a32 32 0 01-31.78-28.26L80 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                        <rect x="32" y="64" width="448" height="80" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M312 240L200 352M312 352L200 240"/>
                    </svg>
                </div>
                `;propertyElement.querySelector(".nb-ptanimator__delete-property").addEventListener("click",function(){const customPropertyElement=this.closest(".nb-ptanimator-panel__method-property");if(customPropertyElement){customPropertyElement.remove();self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)}});customPropertiesWrapper.appendChild(propertyElement);self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}
expandPropertiesLogic(self){var propertyLabels=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-label`);propertyLabels.forEach(function(propertyLabel){var propertyWrapper=propertyLabel.closest(".nb-ptanimator-panel__method-property-wrapper");propertyLabel.addEventListener("click",function(){if(propertyWrapper.getAttribute("data-collapse")=="true"){propertyWrapper.setAttribute("data-collapse","false")}else{propertyWrapper.setAttribute("data-collapse","true")}})})}
startInputsAndDropdowns(self){var inputWrappers=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__method-properties .nb-ptanimator-panel__method-input-wrapper`);inputWrappers.forEach(function(inputWrapper){var dropdownButton=inputWrapper.querySelector(".nb-ptanimator-panel__input-dropdown-button");var dropdown=inputWrapper.querySelector(".nb-ptanimator-panel__input-dropdown");var input=inputWrapper.querySelector(".nb-ptanimator-panel__input");var colorSelectedInput=inputWrapper.querySelector(".nb-ptanimator-panel__input-type-color-value");if(input){input.addEventListener("change",function(){if(colorSelectedInput){colorSelectedInput.value=input.value}
self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)});if(colorSelectedInput){colorSelectedInput.addEventListener("change",function(){input.value=colorSelectedInput.value;self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}
if(dropdown){input.addEventListener("click",function(){dropdown.setAttribute("data-show","false")})}}
if(dropdownButton){dropdownButton.addEventListener("click",function(event){event.stopImmediatePropagation();if(dropdown.getAttribute("data-show")==="true"){dropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}else{dropdown.setAttribute("data-show","true");document.addEventListener("click",closeDropdown)}});function closeDropdown(event){if(!dropdown.contains(event.target)){dropdown.setAttribute("data-show","false");document.removeEventListener("click",closeDropdown)}}}
if(dropdown){var dropdownOptions=dropdown.querySelectorAll(".nb-ptanimator-panel__input-dropdown-option");dropdownOptions.forEach(function(dropdownOption){if(dropdownOption){dropdownOption.addEventListener("click",function(){dropdown.setAttribute("data-show","false");input.value=dropdownOption.innerHTML;self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}})}
var dot=inputWrapper.querySelector(".nb-ptanimator-panel__dot-input-indicator");if(dot){dot.addEventListener("click",function(){if(input&&input.classList.contains("nb-ptanimator-panel__input-type-color")){input.value=" ";var auxInputColor=inputWrapper.querySelector(".nb-ptanimator-panel__input:not(.nb-ptanimator-panel__input-type-color)");auxInputColor.value=""}else if(input){input.value=""}
self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}});var propertiesWrappers=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__method-properties .nb-ptanimator-panel__method-property-wrapper`);propertiesWrappers.forEach(function(propertyWrapper){var dot=propertyWrapper.querySelector(".nb-ptanimator-panel__dot-input-indicator");var inputWrappers=propertyWrapper.querySelectorAll(`.nb-ptanimator-panel__method-input-wrapper`);if(dot){dot.addEventListener("click",function(){inputWrappers.forEach(function(inputWrapper){var input=inputWrapper.querySelector(".nb-ptanimator-panel__input");if(input&&input.classList.contains("nb-ptanimator-panel__input-type-color")){input.value=" ";var auxInputColor=inputWrapper.querySelector(".nb-ptanimator-panel__input:not(.nb-ptanimator-panel__input-type-color)");auxInputColor.value=""}else if(input){input.value=""}});self.getInputValuesAndSetTimelineVariables(self);self.parentTimelineObject.setThisTimelineAndTimelineView(self.parentTimelineObject)})}})}
getInputValuesAndSetTimelineVariables(self){var opacity=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-opacity`);self.opacity=opacity.value;var autoAlpha=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-autoAlpha`);self.autoAlpha=autoAlpha.value;var transformX=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformX`);self.transformX=transformX.value;var transformY=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformY`);self.transformY=transformY.value;var transformScale=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformScale`);self.transformScale=transformScale.value;var transformRotate=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformRotate`);self.transformRotate=transformRotate.value;var transformSkewX=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformSkewX`);self.transformSkewX=transformSkewX.value;var transformSkewY=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-transformSkewY`);self.transformSkewY=transformSkewY.value;var background=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-background`);self.background=background.value;var color=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-color`);self.color=color.value;var fontFamily=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-fontFamily`);self.fontFamily=fontFamily.value;var fontSize=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-fontSize`);self.fontSize=fontSize.value;var fontWeight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-fontWeight`);self.fontWeight=fontWeight.value;var fontStyle=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-fontStyle`);self.fontStyle=fontStyle.value;var textAlign=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-textAlign`);self.textAlign=textAlign.value;var textDecoration=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-textDecoration`);self.textDecoration=textDecoration.value;var textTransform=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-textTransform`);self.textTransform=textTransform.value;var lineHeight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-lineHeight`);self.lineHeight=lineHeight.value;var letterSpacing=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-letterSpacing`);self.letterSpacing=letterSpacing.value;var wordSpacing=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-wordSpacing`);self.wordSpacing=wordSpacing.value;var width=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-width`);self.width=width.value;var height=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-height`);self.height=height.value;var minWidth=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-minWidth`);self.minWidth=minWidth.value;var minHeight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-minHeight`);self.minHeight=minHeight.value;var maxWidth=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-maxWidth`);self.maxWidth=maxWidth.value;var maxHeight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-maxHeight`);self.maxHeight=maxHeight.value;var paddingTop=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-paddingTop`);self.paddingTop=paddingTop.value;var paddingBottom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-paddingBottom`);self.paddingBottom=paddingBottom.value;var paddingLeft=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-paddingLeft`);self.paddingLeft=paddingLeft.value;var paddingRight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-paddingRight`);self.paddingRight=paddingRight.value;var marginTop=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-marginTop`);self.marginTop=marginTop.value;var marginBottom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-marginBottom`);self.marginBottom=marginBottom.value;var marginLeft=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-marginLeft`);self.marginLeft=marginLeft.value;var marginRight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-marginRight`);self.marginRight=marginRight.value;var positionTop=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-positionTop`);self.positionTop=positionTop.value;var positionBottom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-positionBottom`);self.positionBottom=positionBottom.value;var positionLeft=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-positionLeft`);self.positionLeft=positionLeft.value;var positionRight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-positionRight`);self.positionRight=positionRight.value;var borderColor=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderColor`);self.borderColor=borderColor.value;var borderStyle=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderStyle`);self.borderStyle=borderStyle.value;var borderWidthTop=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderWidthTop`);self.borderWidthTop=borderWidthTop.value;var borderWidthBottom=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderWidthBottom`);self.borderWidthBottom=borderWidthBottom.value;var borderWidthLeft=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderWidthLeft`);self.borderWidthLeft=borderWidthLeft.value;var borderWidthRight=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderWidthRight`);self.borderWidthRight=borderWidthRight.value;var borderTopLeftRadius=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderTopLeftRadius`);self.borderTopLeftRadius=borderTopLeftRadius.value;var borderTopRightRadius=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderTopRightRadius`);self.borderTopRightRadius=borderTopRightRadius.value;var borderBottomLeftRadius=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderBottomLeftRadius`);self.borderBottomLeftRadius=borderBottomLeftRadius.value;var borderBottomRightRadius=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-borderBottomRightRadius`);self.borderBottomRightRadius=borderBottomRightRadius.value;var boxShadowOffsetX=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-boxShadowOffsetX`);self.boxShadowOffsetX=boxShadowOffsetX.value;var boxShadowOffsetY=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-boxShadowOffsetY`);self.boxShadowOffsetY=boxShadowOffsetY.value;var boxShadowBlur=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-boxShadowBlur`);self.boxShadowBlur=boxShadowBlur.value;var boxShadowSpread=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-boxShadowSpread`);self.boxShadowSpread=boxShadowSpread.value;var boxShadowColor=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-boxShadowColor`);self.boxShadowColor=boxShadowColor.value;var filterBlur=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterBlur`);self.filterBlur=filterBlur.value;var filterBrightness=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterBrightness`);self.filterBrightness=filterBrightness.value;var filterContrast=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterContrast`);self.filterContrast=filterContrast.value;var filterGrayscale=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterGrayscale`);self.filterGrayscale=filterGrayscale.value;var filterHueRotate=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterHueRotate`);self.filterHueRotate=filterHueRotate.value;var filterInvert=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterInvert`);self.filterInvert=filterInvert.value;var filterSaturate=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterSaturate`);self.filterSaturate=filterSaturate.value;var filterSepia=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-filterSepia`);self.filterSepia=filterSepia.value;var svgFill=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-svgFill`);self.svgFill=svgFill.value;var svgStrokeColor=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-svgStrokeColor`);self.svgStrokeColor=svgStrokeColor.value;var svgStrokeWidth=document.querySelector(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property-svgStrokeWidth`);self.svgStrokeWidth=svgStrokeWidth.value;const customPropertyElements=document.querySelectorAll(`${self.animWrapperSelector} .nb-ptanimator-panel__method-property--custom-property`);let customProperties=[];let customValues=[];customPropertyElements.forEach((element)=>{const propertyInput=element.querySelector(".nb-ptanimator-panel__method-property-property");const valueInput=element.querySelector(".nb-ptanimator-panel__method-property-value");if(propertyInput&&valueInput){customProperties.push(propertyInput.value);customValues.push(valueInput.value)}});self.customProperties=customProperties.join("d110708");self.customValues=customValues.join("d110708")}}}