{"version":3,"file":"details-cbc2a2a0.js","sources":["../../../src/js/_utilities/details.ts"],"sourcesContent":["export default class Details {\n    el: HTMLDetailsElement\n    header: HTMLElement\n    content: HTMLElement\n    animation: null | Animation\n    isClosing: boolean = false\n    isExpanding: boolean = false\n\n    constructor(el: HTMLDetailsElement) {\n        this.el = el\n        this.header = el.querySelector('summary') as HTMLElement\n        this.content = el.querySelector('summary + *') as HTMLElement\n        this.animation = null\n        this.header.addEventListener('click', (e) => this.onClick(e))\n    }\n\n    onClick(e: Event) {\n        e.preventDefault()\n\n        this.el.style.overflow = 'hidden'\n\n        if (this.isClosing || !this.el.open) {\n            this.open()\n        } else if (this.isExpanding || this.el.open) {\n            this.shrink()\n        }\n    }\n\n    shrink() {\n        this.isClosing = true\n\n        const startHeight = `${this.el.offsetHeight}px`\n        const endHeight = `${this.header.offsetHeight}px`\n\n        if (this.animation) {\n            this.animation.cancel()\n        }\n\n        this.el.classList.add('closing')\n\n        this.animation = this.el.animate(\n            {\n                height: [startHeight, endHeight],\n            },\n            {\n                duration: 150,\n                easing: 'ease-out',\n            }\n        )\n\n        this.animation.onfinish = () => this.onAnimationFinish(false)\n        this.animation.oncancel = () => (this.isClosing = false)\n    }\n\n    open() {\n        this.el.style.height = `${this.el.offsetHeight}px`\n        this.el.open = true\n\n        window.requestAnimationFrame(() => this.expand())\n    }\n\n    expand() {\n        this.isExpanding = true\n\n        const startHeight = `${this.el.offsetHeight}px`\n        const endHeight = `${\n            this.header.offsetHeight + this.content.offsetHeight\n        }px`\n\n        if (this.animation) {\n            this.animation.cancel()\n        }\n\n        this.animation = this.el.animate(\n            {\n                // Set the keyframes from the startHeight to endHeight\n                height: [startHeight, endHeight],\n            },\n            {\n                duration: 150,\n                easing: 'ease-out',\n            }\n        )\n\n        this.animation.onfinish = () => this.onAnimationFinish(true)\n        this.animation.oncancel = () => (this.isExpanding = false)\n    }\n\n    onAnimationFinish(open: boolean) {\n        this.el.open = open\n        this.animation = null\n        this.isClosing = false\n        this.isExpanding = false\n        this.el.style.height = this.el.style.overflow = ''\n        this.el.classList.remove('closing')\n    }\n}\n"],"names":["Details","el","e","startHeight","endHeight","open"],"mappings":"AAAA,MAAqBA,CAAQ,CAQzB,YAAYC,EAAwB,CAHf,KAAA,UAAA,GACE,KAAA,YAAA,GAGnB,KAAK,GAAKA,EACL,KAAA,OAASA,EAAG,cAAc,SAAS,EACnC,KAAA,QAAUA,EAAG,cAAc,aAAa,EAC7C,KAAK,UAAY,KACZ,KAAA,OAAO,iBAAiB,QAAUC,GAAM,KAAK,QAAQA,CAAC,CAAC,CAChE,CAEA,QAAQA,EAAU,CACdA,EAAE,eAAe,EAEZ,KAAA,GAAG,MAAM,SAAW,SAErB,KAAK,WAAa,CAAC,KAAK,GAAG,KAC3B,KAAK,KAAK,GACH,KAAK,aAAe,KAAK,GAAG,OACnC,KAAK,OAAO,CAEpB,CAEA,QAAS,CACL,KAAK,UAAY,GAEjB,MAAMC,EAAc,GAAG,KAAK,GAAG,YAAY,KACrCC,EAAY,GAAG,KAAK,OAAO,YAAY,KAEzC,KAAK,WACL,KAAK,UAAU,SAGd,KAAA,GAAG,UAAU,IAAI,SAAS,EAE1B,KAAA,UAAY,KAAK,GAAG,QACrB,CACI,OAAQ,CAACD,EAAaC,CAAS,CACnC,EACA,CACI,SAAU,IACV,OAAQ,UACZ,CAAA,EAGJ,KAAK,UAAU,SAAW,IAAM,KAAK,kBAAkB,EAAK,EAC5D,KAAK,UAAU,SAAW,IAAO,KAAK,UAAY,EACtD,CAEA,MAAO,CACH,KAAK,GAAG,MAAM,OAAS,GAAG,KAAK,GAAG,YAAY,KAC9C,KAAK,GAAG,KAAO,GAEf,OAAO,sBAAsB,IAAM,KAAK,OAAQ,CAAA,CACpD,CAEA,QAAS,CACL,KAAK,YAAc,GAEnB,MAAMD,EAAc,GAAG,KAAK,GAAG,YAAY,KACrCC,EAAY,GACd,KAAK,OAAO,aAAe,KAAK,QAAQ,YAC5C,KAEI,KAAK,WACL,KAAK,UAAU,SAGd,KAAA,UAAY,KAAK,GAAG,QACrB,CAEI,OAAQ,CAACD,EAAaC,CAAS,CACnC,EACA,CACI,SAAU,IACV,OAAQ,UACZ,CAAA,EAGJ,KAAK,UAAU,SAAW,IAAM,KAAK,kBAAkB,EAAI,EAC3D,KAAK,UAAU,SAAW,IAAO,KAAK,YAAc,EACxD,CAEA,kBAAkBC,EAAe,CAC7B,KAAK,GAAG,KAAOA,EACf,KAAK,UAAY,KACjB,KAAK,UAAY,GACjB,KAAK,YAAc,GACnB,KAAK,GAAG,MAAM,OAAS,KAAK,GAAG,MAAM,SAAW,GAC3C,KAAA,GAAG,UAAU,OAAO,SAAS,CACtC,CACJ"}