{"version":3,"file":"transitionVerticalCollapse.obs.js","sources":["../../../Framework/Controls/transitionVerticalCollapse.obs"],"sourcesContent":["<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->\r\n<template>\r\n    <transition\r\n                enter-active-class=\"vertical-collapse-enter-active\"\r\n                leave-active-class=\"vertical-collapse-leave-active\"\r\n                @enter=\"enter\"\r\n                @after-enter=\"afterEnter\"\r\n                @leave=\"leave\"\r\n                @after-leave=\"afterLeave\">\r\n        <slot />\r\n    </transition>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n    import { computed, PropType, ref } from \"vue\";\r\n\r\n    type CachedStyles = {\r\n        height: string;\r\n        paddingTop: string;\r\n        paddingBottom: string;\r\n    };\r\n\r\n    const props = defineProps({\r\n        speed: {\r\n            type: String as PropType<\"normal\" | \"fast\" | \"slow\">,\r\n            default: \"normal\"\r\n        }\r\n    });\r\n\r\n    // These transition speeds come from jQuery's hide/show \"fast\" and \"slow\" options.\r\n    const speed = computed<string>(() => {\r\n        switch (props.speed) {\r\n            case \"fast\":\r\n                return \"0.2s\";\r\n            case \"slow\":\r\n                return \"0.6s\";\r\n            default:\r\n                return \"0.35s\";\r\n        }\r\n    });\r\n    const cachedStyles = ref<CachedStyles>();\r\n\r\n    /**\r\n     * Called when the element has entered the DOM.\r\n     *\r\n     * @param element The element that has entered the DOM.\r\n     */\r\n    function enter(element: Element): void {\r\n        if (!(element instanceof HTMLElement)) {\r\n            return;\r\n        }\r\n        // Because width and height may be 'auto',\r\n        // first detect and cache the dimensions\r\n        detectAndCacheDimensions(element);\r\n\r\n        // The order of applying styles is important:\r\n        // - 1. Set styles for state before transition\r\n        // - 2. Force repaint\r\n        // - 3. Add transition style\r\n        // - 4. Set styles for state after transition\r\n        // If the order is not right and you open any 2nd level submenu\r\n        // for the first time, the transition will not work.\r\n        setClosedDimensions(element);\r\n        hideOverflow(element);\r\n        forceRepaint(element);\r\n        setTransitionStyles(element);\r\n        setOpenedDimensions(element);\r\n    }\r\n\r\n    /**\r\n     * Called after the element has entered the DOM and the animation has completed.\r\n     *\r\n     * @param element The element that entered the DOM.\r\n     */\r\n    function afterEnter(element: Element): void {\r\n        if (!(element instanceof HTMLElement)) {\r\n            return;\r\n        }\r\n\r\n        // Clean up inline styles\r\n        unsetOverflow(element);\r\n        unsetTransitionStyles(element);\r\n        unsetDimensions(element);\r\n        cachedStyles.value = undefined;\r\n    }\r\n\r\n    /**\r\n     * Called when the element should begin animation for leaving the DOM.\r\n     *\r\n     * @param element The element that is leaving the DOM.\r\n     */\r\n    function leave(element: Element): void {\r\n        if (!(element instanceof HTMLElement)) {\r\n            return;\r\n        }\r\n\r\n        // For some reason, @leave triggered when starting\r\n        // from open state on page load. So for safety,\r\n        // check if the dimensions have been cached.\r\n        detectAndCacheDimensions(element);\r\n\r\n        // The order of applying styles is less important\r\n        // than in the enter phase, as long as we repaint\r\n        // before setting the closed dimensions.\r\n        // But it is probably best to use the same\r\n        // order as the enter phase.\r\n        setOpenedDimensions(element);\r\n        hideOverflow(element);\r\n        forceRepaint(element);\r\n        setTransitionStyles(element);\r\n        setClosedDimensions(element);\r\n    }\r\n\r\n    /**\r\n     * Called after the element has left the DOM and the animation has completed.\r\n     *\r\n     * @param element The element that left the DOM.\r\n     */\r\n    function afterLeave(element: Element): void {\r\n        if (!(element instanceof HTMLElement)) {\r\n            return;\r\n        }\r\n\r\n        // Clean up inline styles\r\n        unsetOverflow(element);\r\n        unsetTransitionStyles(element);\r\n        unsetDimensions(element);\r\n        cachedStyles.value = undefined;\r\n    }\r\n\r\n    function detectAndCacheDimensions(el): void {\r\n        // Cache actual dimensions\r\n        // only once to void invalid values when\r\n        // triggering during a transition\r\n        if (cachedStyles.value) return;\r\n\r\n        const visibility = el.style.visibility;\r\n        const display = el.style.display;\r\n\r\n        // Trick to get the width and\r\n        // height of a hidden element\r\n        el.style.visibility = \"hidden\";\r\n        el.style.display = \"\";\r\n\r\n        cachedStyles.value = detectRelevantDimensions(el);\r\n\r\n        // Restore any original styling\r\n        el.style.visibility = visibility;\r\n        el.style.display = display;\r\n    }\r\n\r\n    function detectRelevantDimensions(el): CachedStyles {\r\n        // These properties will be transitioned\r\n        return {\r\n            height: el.offsetHeight + \"px\",\r\n            paddingTop: el.style.paddingTop || getComputedStyle(el, null).getPropertyValue(\"padding-top\"),\r\n            paddingBottom: el.style.paddingBottom || getComputedStyle(el, null).getPropertyValue(\"padding-bottom\"),\r\n        };\r\n    }\r\n\r\n    function setClosedDimensions(el): void {\r\n        if (!cachedStyles.value) return;\r\n        Object.keys(cachedStyles.value).forEach(key => {\r\n            el.style[key] = \"0\";\r\n        });\r\n    }\r\n\r\n    function setOpenedDimensions(el): void {\r\n        if (!cachedStyles.value) return;\r\n        Object.keys(cachedStyles.value).forEach((key) => {\r\n            el.style[key] = cachedStyles.value![key];\r\n        });\r\n    }\r\n\r\n    function unsetDimensions(el): void {\r\n        if (!cachedStyles.value) return;\r\n        Object.keys(cachedStyles.value).forEach((key) => {\r\n            el.style[key] = \"\";\r\n        });\r\n    }\r\n\r\n    function forceRepaint(el): void {\r\n        // Force repaint to make sure the animation is triggered correctly.\r\n        // Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/\r\n        getComputedStyle(el).height;\r\n    }\r\n\r\n    function setTransitionStyles(el): void {\r\n        el.style.transition = `height ${speed.value} ease-in-out, padding-top ${speed.value} ease-in-out, padding-bottom ${speed.value} ease-in-out`;\r\n    }\r\n\r\n    function unsetTransitionStyles(el): void {\r\n        el.style.transition = \"\";\r\n    }\r\n\r\n    function hideOverflow(el): void {\r\n        el.style.overflow = \"hidden\";\r\n    }\r\n\r\n    function unsetOverflow(el): void {\r\n        el.style.overflow = \"\";\r\n    }\r\n\r\n</script>\r\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;;;;;;;;;;;;;;;;;;;;;;;;;"}