{"version":3,"file":"transitionVerticalCollapse.obs.js","sources":["../../../Framework/Controls/transitionVerticalCollapse.obs"],"sourcesContent":["<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->\n<template>\n    <transition\n                enter-active-class=\"vertical-collapse-enter-active\"\n                leave-active-class=\"vertical-collapse-leave-active\"\n                @enter=\"enter\"\n                @after-enter=\"afterEnter\"\n                @leave=\"leave\"\n                @after-leave=\"afterLeave\">\n        <slot />\n    </transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref } from \"vue\";\n\n    type CachedStyles = {\n        height: string;\n        paddingTop: string;\n        paddingBottom: string;\n    };\n\n    const props = defineProps({\n        speed: {\n            type: String as PropType<\"normal\" | \"fast\" | \"slow\">,\n            default: \"normal\"\n        }\n    });\n\n    // These transition speeds come from jQuery's hide/show \"fast\" and \"slow\" options.\n    const speed = computed<string>(() => {\n        switch (props.speed) {\n            case \"fast\":\n                return \"0.2s\";\n            case \"slow\":\n                return \"0.6s\";\n            default:\n                return \"0.35s\";\n        }\n    });\n    const cachedStyles = ref<CachedStyles>();\n\n    /**\n     * Called when the element has entered the DOM.\n     *\n     * @param element The element that has entered the DOM.\n     */\n    function enter(element: Element): void {\n        if (!(element instanceof HTMLElement)) {\n            return;\n        }\n        // Because width and height may be 'auto',\n        // first detect and cache the dimensions\n        detectAndCacheDimensions(element);\n\n        // The order of applying styles is important:\n        // - 1. Set styles for state before transition\n        // - 2. Force repaint\n        // - 3. Add transition style\n        // - 4. Set styles for state after transition\n        // If the order is not right and you open any 2nd level submenu\n        // for the first time, the transition will not work.\n        setClosedDimensions(element);\n        hideOverflow(element);\n        forceRepaint(element);\n        setTransitionStyles(element);\n        setOpenedDimensions(element);\n    }\n\n    /**\n     * Called after the element has entered the DOM and the animation has completed.\n     *\n     * @param element The element that entered the DOM.\n     */\n    function afterEnter(element: Element): void {\n        if (!(element instanceof HTMLElement)) {\n            return;\n        }\n\n        // Clean up inline styles\n        unsetOverflow(element);\n        unsetTransitionStyles(element);\n        unsetDimensions(element);\n        cachedStyles.value = undefined;\n    }\n\n    /**\n     * Called when the element should begin animation for leaving the DOM.\n     *\n     * @param element The element that is leaving the DOM.\n     */\n    function leave(element: Element): void {\n        if (!(element instanceof HTMLElement)) {\n            return;\n        }\n\n        // For some reason, @leave triggered when starting\n        // from open state on page load. So for safety,\n        // check if the dimensions have been cached.\n        detectAndCacheDimensions(element);\n\n        // The order of applying styles is less important\n        // than in the enter phase, as long as we repaint\n        // before setting the closed dimensions.\n        // But it is probably best to use the same\n        // order as the enter phase.\n        setOpenedDimensions(element);\n        hideOverflow(element);\n        forceRepaint(element);\n        setTransitionStyles(element);\n        setClosedDimensions(element);\n    }\n\n    /**\n     * Called after the element has left the DOM and the animation has completed.\n     *\n     * @param element The element that left the DOM.\n     */\n    function afterLeave(element: Element): void {\n        if (!(element instanceof HTMLElement)) {\n            return;\n        }\n\n        // Clean up inline styles\n        unsetOverflow(element);\n        unsetTransitionStyles(element);\n        unsetDimensions(element);\n        cachedStyles.value = undefined;\n    }\n\n    function detectAndCacheDimensions(el): void {\n        // Cache actual dimensions\n        // only once to void invalid values when\n        // triggering during a transition\n        if (cachedStyles.value) return;\n\n        const visibility = el.style.visibility;\n        const display = el.style.display;\n\n        // Trick to get the width and\n        // height of a hidden element\n        el.style.visibility = \"hidden\";\n        el.style.display = \"\";\n\n        cachedStyles.value = detectRelevantDimensions(el);\n\n        // Restore any original styling\n        el.style.visibility = visibility;\n        el.style.display = display;\n    }\n\n    function detectRelevantDimensions(el): CachedStyles {\n        // These properties will be transitioned\n        return {\n            height: el.offsetHeight + \"px\",\n            paddingTop: el.style.paddingTop || getComputedStyle(el, null).getPropertyValue(\"padding-top\"),\n            paddingBottom: el.style.paddingBottom || getComputedStyle(el, null).getPropertyValue(\"padding-bottom\"),\n        };\n    }\n\n    function setClosedDimensions(el): void {\n        if (!cachedStyles.value) return;\n        Object.keys(cachedStyles.value).forEach(key => {\n            el.style[key] = \"0\";\n        });\n    }\n\n    function setOpenedDimensions(el): void {\n        if (!cachedStyles.value) return;\n        Object.keys(cachedStyles.value).forEach((key) => {\n            el.style[key] = cachedStyles.value![key];\n        });\n    }\n\n    function unsetDimensions(el): void {\n        if (!cachedStyles.value) return;\n        Object.keys(cachedStyles.value).forEach((key) => {\n            el.style[key] = \"\";\n        });\n    }\n\n    function forceRepaint(el): void {\n        // Force repaint to make sure the animation is triggered correctly.\n        // Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/\n        getComputedStyle(el).height;\n    }\n\n    function setTransitionStyles(el): void {\n        el.style.transition = `height ${speed.value} ease-in-out, padding-top ${speed.value} ease-in-out, padding-bottom ${speed.value} ease-in-out`;\n    }\n\n    function unsetTransitionStyles(el): void {\n        el.style.transition = \"\";\n    }\n\n    function hideOverflow(el): void {\n        el.style.overflow = \"hidden\";\n    }\n\n    function unsetOverflow(el): void {\n        el.style.overflow = \"\";\n    }\n\n</script>\n"],"names":["props","__props","speed","computed","cachedStyles","ref","enter","element","HTMLElement","detectAndCacheDimensions","setClosedDimensions","hideOverflow","forceRepaint","setTransitionStyles","setOpenedDimensions","afterEnter","unsetOverflow","unsetTransitionStyles","unsetDimensions","value","undefined","leave","afterLeave","el","visibility","style","display","detectRelevantDimensions","height","offsetHeight","paddingTop","getComputedStyle","getPropertyValue","paddingBottom","Object","keys","forEach","key","transition","concat","overflow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;UAsBI,IAAMA,KAAK,GAAGC,OAKZ,CAAA;MAGF,IAAA,IAAMC,KAAK,GAAGC,QAAQ,CAAS,MAAM;YACjC,QAAQH,KAAK,CAACE,KAAK;MACf,QAAA,KAAK,MAAM;MACP,UAAA,OAAO,MAAM,CAAA;MACjB,QAAA,KAAK,MAAM;MACP,UAAA,OAAO,MAAM,CAAA;MACjB,QAAA;MACI,UAAA,OAAO,OAAO,CAAA;MACtB,OAAA;MACJ,KAAC,CAAC,CAAA;MACF,IAAA,IAAME,YAAY,GAAGC,GAAG,EAAgB,CAAA;UAOxC,SAASC,KAAKA,CAACC,OAAgB,EAAQ;MACnC,MAAA,IAAI,EAAEA,OAAO,YAAYC,WAAW,CAAC,EAAE;MACnC,QAAA,OAAA;MACJ,OAAA;YAGAC,wBAAwB,CAACF,OAAO,CAAC,CAAA;YASjCG,mBAAmB,CAACH,OAAO,CAAC,CAAA;YAC5BI,YAAY,CAACJ,OAAO,CAAC,CAAA;YACrBK,YAAY,CAACL,OAAO,CAAC,CAAA;YACrBM,mBAAmB,CAACN,OAAO,CAAC,CAAA;YAC5BO,mBAAmB,CAACP,OAAO,CAAC,CAAA;MAChC,KAAA;UAOA,SAASQ,UAAUA,CAACR,OAAgB,EAAQ;MACxC,MAAA,IAAI,EAAEA,OAAO,YAAYC,WAAW,CAAC,EAAE;MACnC,QAAA,OAAA;MACJ,OAAA;YAGAQ,aAAa,CAACT,OAAO,CAAC,CAAA;YACtBU,qBAAqB,CAACV,OAAO,CAAC,CAAA;YAC9BW,eAAe,CAACX,OAAO,CAAC,CAAA;YACxBH,YAAY,CAACe,KAAK,GAAGC,SAAS,CAAA;MAClC,KAAA;UAOA,SAASC,KAAKA,CAACd,OAAgB,EAAQ;MACnC,MAAA,IAAI,EAAEA,OAAO,YAAYC,WAAW,CAAC,EAAE;MACnC,QAAA,OAAA;MACJ,OAAA;YAKAC,wBAAwB,CAACF,OAAO,CAAC,CAAA;YAOjCO,mBAAmB,CAACP,OAAO,CAAC,CAAA;YAC5BI,YAAY,CAACJ,OAAO,CAAC,CAAA;YACrBK,YAAY,CAACL,OAAO,CAAC,CAAA;YACrBM,mBAAmB,CAACN,OAAO,CAAC,CAAA;YAC5BG,mBAAmB,CAACH,OAAO,CAAC,CAAA;MAChC,KAAA;UAOA,SAASe,UAAUA,CAACf,OAAgB,EAAQ;MACxC,MAAA,IAAI,EAAEA,OAAO,YAAYC,WAAW,CAAC,EAAE;MACnC,QAAA,OAAA;MACJ,OAAA;YAGAQ,aAAa,CAACT,OAAO,CAAC,CAAA;YACtBU,qBAAqB,CAACV,OAAO,CAAC,CAAA;YAC9BW,eAAe,CAACX,OAAO,CAAC,CAAA;YACxBH,YAAY,CAACe,KAAK,GAAGC,SAAS,CAAA;MAClC,KAAA;UAEA,SAASX,wBAAwBA,CAACc,EAAE,EAAQ;YAIxC,IAAInB,YAAY,CAACe,KAAK,EAAE,OAAA;MAExB,MAAA,IAAMK,UAAU,GAAGD,EAAE,CAACE,KAAK,CAACD,UAAU,CAAA;MACtC,MAAA,IAAME,OAAO,GAAGH,EAAE,CAACE,KAAK,CAACC,OAAO,CAAA;MAIhCH,MAAAA,EAAE,CAACE,KAAK,CAACD,UAAU,GAAG,QAAQ,CAAA;MAC9BD,MAAAA,EAAE,CAACE,KAAK,CAACC,OAAO,GAAG,EAAE,CAAA;MAErBtB,MAAAA,YAAY,CAACe,KAAK,GAAGQ,wBAAwB,CAACJ,EAAE,CAAC,CAAA;MAGjDA,MAAAA,EAAE,CAACE,KAAK,CAACD,UAAU,GAAGA,UAAU,CAAA;MAChCD,MAAAA,EAAE,CAACE,KAAK,CAACC,OAAO,GAAGA,OAAO,CAAA;MAC9B,KAAA;UAEA,SAASC,wBAAwBA,CAACJ,EAAE,EAAgB;YAEhD,OAAO;MACHK,QAAAA,MAAM,EAAEL,EAAE,CAACM,YAAY,GAAG,IAAI;MAC9BC,QAAAA,UAAU,EAAEP,EAAE,CAACE,KAAK,CAACK,UAAU,IAAIC,gBAAgB,CAACR,EAAE,EAAE,IAAI,CAAC,CAACS,gBAAgB,CAAC,aAAa,CAAC;MAC7FC,QAAAA,aAAa,EAAEV,EAAE,CAACE,KAAK,CAACQ,aAAa,IAAIF,gBAAgB,CAACR,EAAE,EAAE,IAAI,CAAC,CAACS,gBAAgB,CAAC,gBAAgB,CAAA;aACxG,CAAA;MACL,KAAA;UAEA,SAAStB,mBAAmBA,CAACa,EAAE,EAAQ;MACnC,MAAA,IAAI,CAACnB,YAAY,CAACe,KAAK,EAAE,OAAA;YACzBe,MAAM,CAACC,IAAI,CAAC/B,YAAY,CAACe,KAAK,CAAC,CAACiB,OAAO,CAACC,GAAG,IAAI;MAC3Cd,QAAAA,EAAE,CAACE,KAAK,CAACY,GAAG,CAAC,GAAG,GAAG,CAAA;MACvB,OAAC,CAAC,CAAA;MACN,KAAA;UAEA,SAASvB,mBAAmBA,CAACS,EAAE,EAAQ;MACnC,MAAA,IAAI,CAACnB,YAAY,CAACe,KAAK,EAAE,OAAA;YACzBe,MAAM,CAACC,IAAI,CAAC/B,YAAY,CAACe,KAAK,CAAC,CAACiB,OAAO,CAAEC,GAAG,IAAK;cAC7Cd,EAAE,CAACE,KAAK,CAACY,GAAG,CAAC,GAAGjC,YAAY,CAACe,KAAK,CAAEkB,GAAG,CAAC,CAAA;MAC5C,OAAC,CAAC,CAAA;MACN,KAAA;UAEA,SAASnB,eAAeA,CAACK,EAAE,EAAQ;MAC/B,MAAA,IAAI,CAACnB,YAAY,CAACe,KAAK,EAAE,OAAA;YACzBe,MAAM,CAACC,IAAI,CAAC/B,YAAY,CAACe,KAAK,CAAC,CAACiB,OAAO,CAAEC,GAAG,IAAK;MAC7Cd,QAAAA,EAAE,CAACE,KAAK,CAACY,GAAG,CAAC,GAAG,EAAE,CAAA;MACtB,OAAC,CAAC,CAAA;MACN,KAAA;UAEA,SAASzB,YAAYA,CAACW,EAAE,EAAQ;MAG5BQ,MAAAA,gBAAgB,CAACR,EAAE,CAAC,CAACK,MAAM,CAAA;MAC/B,KAAA;UAEA,SAASf,mBAAmBA,CAACU,EAAE,EAAQ;YACnCA,EAAE,CAACE,KAAK,CAACa,UAAU,aAAAC,MAAA,CAAarC,KAAK,CAACiB,KAAK,EAAA,4BAAA,CAAA,CAAAoB,MAAA,CAA6BrC,KAAK,CAACiB,KAAK,EAAA,+BAAA,CAAA,CAAAoB,MAAA,CAAgCrC,KAAK,CAACiB,KAAK,EAAc,cAAA,CAAA,CAAA;MAChJ,KAAA;UAEA,SAASF,qBAAqBA,CAACM,EAAE,EAAQ;MACrCA,MAAAA,EAAE,CAACE,KAAK,CAACa,UAAU,GAAG,EAAE,CAAA;MAC5B,KAAA;UAEA,SAAS3B,YAAYA,CAACY,EAAE,EAAQ;MAC5BA,MAAAA,EAAE,CAACE,KAAK,CAACe,QAAQ,GAAG,QAAQ,CAAA;MAChC,KAAA;UAEA,SAASxB,aAAaA,CAACO,EAAE,EAAQ;MAC7BA,MAAAA,EAAE,CAACE,KAAK,CAACe,QAAQ,GAAG,EAAE,CAAA;MAC1B,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}