{"version":3,"file":"transitionVerticalCollapse.js","sources":["../../../Framework/Controls/transitionVerticalCollapse.ts"],"sourcesContent":["// <copyright>\r\n// Copyright by the Spark Development Network\r\n//\r\n// Licensed under the Rock Community License (the \"License\");\r\n// you may not use this file except in compliance with the License.\r\n// You may obtain a copy of the License at\r\n//\r\n// http://www.rockrms.com/license\r\n//\r\n// Unless required by applicable law or agreed to in writing, software\r\n// distributed under the License is distributed on an \"AS IS\" BASIS,\r\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n// See the License for the specific language governing permissions and\r\n// limitations under the License.\r\n// </copyright>\r\n//\r\nimport { computed, defineComponent, PropType } from \"vue\";\r\n\r\ntype CollapseState = {\r\n    display: string;\r\n    computedPaddingTop: string;\r\n    computedPaddingBottom: string;\r\n};\r\n\r\n// This provides animations for doing vertical collapses, such as an expander.\r\n// It will not work correctly if your element has padding-top, padding-bottom\r\n// or height values set in the style tag.\r\nexport default defineComponent({\r\n    name: \"TransitionVerticalCollapse\",\r\n\r\n    props: {\r\n        speed: {\r\n            type: String as PropType<\"normal\" | \"fast\" | \"slow\">,\r\n            default: \"normal\"\r\n        }\r\n    },\r\n\r\n    setup(props) {\r\n        /**\r\n         * Called before the element begins to enter the DOM.\r\n         *\r\n         * @param element The element that will be entering the DOM.\r\n         */\r\n        const beforeEnter = (element: HTMLElement): void => {\r\n            // Save any values that will be used during the animation.\r\n            const state: CollapseState = {\r\n                display: element.style.display,\r\n                computedPaddingTop: getComputedStyle(element).paddingTop,\r\n                computedPaddingBottom: getComputedStyle(element).paddingBottom\r\n            };\r\n\r\n            element.dataset.transitionCollapseState = JSON.stringify(state);\r\n\r\n            // Reset all the styles we will be transitioning unless they already\r\n            // have values (which probably means we are aborting an expand).\r\n            if (!element.style.height) {\r\n                element.style.height = \"0px\";\r\n            }\r\n\r\n            if (!element.style.paddingTop) {\r\n                element.style.paddingTop = \"0px\";\r\n            }\r\n\r\n            if (!element.style.paddingBottom) {\r\n                element.style.paddingBottom = \"0px\";\r\n            }\r\n\r\n            element.style.display = \"\";\r\n        };\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        const enter = (element: HTMLElement): void => {\r\n            // Set values that will cause the vertical space to expand.\r\n            requestAnimationFrame(() => {\r\n                const state = JSON.parse(element.dataset.transitionCollapseState ?? \"\") as CollapseState;\r\n                const verticalPadding = (parseInt(state.computedPaddingTop) || 0) + (parseInt(state.computedPaddingBottom) || 0);\r\n\r\n                element.style.height = `${element.scrollHeight + verticalPadding}px`;\r\n                element.style.paddingTop = state.computedPaddingTop;\r\n                element.style.paddingBottom = state.computedPaddingBottom;\r\n            });\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        const afterEnter = (element: HTMLElement): void => {\r\n            const state = JSON.parse(element.dataset.transitionCollapseState ?? \"\") as CollapseState;\r\n\r\n            // Reset all the explicit styles so they go back to implicit values.\r\n            element.style.height = \"\";\r\n            element.style.paddingTop = \"\";\r\n            element.style.paddingBottom = \"\";\r\n            element.style.display = state.display !== \"none\" ? state.display : \"\";\r\n\r\n            delete element.dataset.transitionCollapseState;\r\n        };\r\n\r\n        /**\r\n         * Called before the element begins to leave the DOM.\r\n         *\r\n         * @param element The element that will be leaving the DOM.\r\n         */\r\n        const beforeLeave = (element: HTMLElement): void => {\r\n            // Set the height explicitely so the CSS animation will trigger.\r\n            element.style.height = `${element.offsetHeight}px`;\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        const leave = (element: HTMLElement): void => {\r\n            // Set values that will cause the vertical space to collapse.\r\n            requestAnimationFrame(() => {\r\n                element.style.height = \"0px\";\r\n                element.style.paddingTop = \"0px\";\r\n                element.style.paddingBottom = \"0px\";\r\n            });\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        const afterLeave = (element: HTMLElement): void => {\r\n            // Reset all the explicit styles so they go back to implicit values.\r\n            element.style.height = \"\";\r\n            element.style.paddingTop = \"\";\r\n            element.style.paddingBottom = \"\";\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>(() => props.speed == \"fast\" ? \"0.2s\" : props.speed == \"slow\" ? \"0.6s\" : \"0.35s\");\r\n\r\n        return {\r\n            afterEnter,\r\n            afterLeave,\r\n            beforeEnter,\r\n            beforeLeave,\r\n            enter,\r\n            leave,\r\n            speed\r\n        };\r\n    },\r\n\r\n    template: `\r\n    <v-style>\r\n        .vertical-collapse-enter-active,\r\n        .vertical-collapse-leave-active {\r\n            overflow: hidden;\r\n            transition-property: height, padding-top, padding-bottom;\r\n            transition-duration: {{ speed }};\r\n            transition-timing-function: ease-in-out;\r\n        }\r\n    </v-style>\r\n<transition\r\n    enter-active-class=\"vertical-collapse-enter-active\"\r\n    leave-active-class=\"vertical-collapse-leave-active\"\r\n    @before-enter=\"beforeEnter\"\r\n    @enter=\"enter\"\r\n    @after-enter=\"afterEnter\"\r\n    @before-leave=\"beforeLeave\"\r\n    @leave=\"leave\"\r\n    @after-leave=\"afterLeave\">\r\n    <slot />\r\n</transition>\r\n`\r\n});\r\n\r\n"],"names":["defineComponent","name","props","speed","type","String","default","setup","beforeEnter","element","state","display","style","computedPaddingTop","getComputedStyle","paddingTop","computedPaddingBottom","paddingBottom","dataset","transitionCollapseState","JSON","stringify","height","enter","requestAnimationFrame","_element$dataset$tran","parse","verticalPadding","parseInt","concat","scrollHeight","afterEnter","_element$dataset$tran2","beforeLeave","offsetHeight","leave","afterLeave","computed","template"],"mappings":"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"}