element\n\t\tthis.content = el.querySelector('.content'); // Store the element\n\t\tthis.animation = null; // Store the animation object (so we can cancel it if needed)\n\t\tthis.isClosing = false; // Store if the element is closing\n\t\tthis.isExpanding = false; // Store if the element is expanding\n\n\t\tthis.summary.addEventListener('click', (e) => this.onClick(e)); // Detect user clicks on the summary element\n\t}\n\n\tonClick(e) {\n\t\te.preventDefault(); // Stop default behaviour from the browser\n\t\tthis.el.style.overflow = 'hidden'; // Add an overflow on the to avoid content overflowing\n\n\t\tif (this.isClosing || !this.el.open) { // Check if the element is being closed or is already closed\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.el.open) { // Check if the element is being openned or is already open\n\t\t\tthis.shrink();\n\t\t}\n\t}\n\n\tshrink() {\n\t\tthis.isClosing = true; // Set the element as \"being closed\"\n\n\t\tconst startHeight = `${this.el.offsetHeight}px`; // Store the current height of the element\n\t\tconst endHeight = `${this.summary.offsetHeight}px`; // Calculate the height of the summary\n\n\t\tif (this.animation) { // If there is already an animation running\n\t\t\tthis.animation.cancel(); // Cancel the current animation\n\t\t}\n\n\t\tthis.animation = this.el.animate({ // Start a WAAPI animation\n\t\t\theight: [startHeight, endHeight] // Set the keyframes from the startHeight to endHeight\n\t\t}, {\n\t\t\tduration: 400,\n\t\t\teasing: 'ease-out'\n\t\t});\n\n\t\tthis.animation.onfinish = () => this.onAnimationFinish(false); // When the animation is complete, call onAnimationFinish()\n\t\tthis.animation.oncancel = () => this.isClosing = false; // If the animation is cancelled, isClosing variable is set to false\n\t}\n\n\topen() {\n\t\tthis.el.style.height = `${this.el.offsetHeight}px`; // Apply a fixed height on the element\n\t\tthis.el.open = true; // Force the [open] attribute on the details element\n\n\t\twindow.requestAnimationFrame(() => this.expand()); // Wait for the next frame to call the expand function\n\t}\n\n\texpand() {\n\t\tthis.isExpanding = true; // Set the element as \"being expanding\"\n\t\tconst startHeight = `${this.el.offsetHeight}px`; // Get the current fixed height of the element\n\t\tconst endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`; // Calculate the open height of the element (summary height + content height)\n\n\t\tif (this.animation) { // If there is already an animation running\n\t\t\tthis.animation.cancel(); // Cancel the current animation\n\t\t}\n\n\t\tthis.animation = this.el.animate({ // Start a WAAPI animation\n\t\t\theight: [startHeight, endHeight] // Set the keyframes from the startHeight to endHeight\n\t\t}, {\n\t\t\tduration: 300,\n\t\t\teasing: 'ease-out'\n\t\t});\n\n\t\tthis.animation.onfinish = () => this.onAnimationFinish(true); // When the animation is complete, call onAnimationFinish()\n\t\tthis.animation.oncancel = () => this.isExpanding = false; // If the animation is cancelled, isExpanding variable is set to false\n\t}\n\n\tonAnimationFinish(open) {\n\t\tthis.el.open = open; // Set the open attribute based on the parameter\n\t\tthis.animation = null; // Clear the stored animation\n\t\tthis.isClosing = false; // Reset isClosing\n\t\tthis.isExpanding = false; // Reset isExpanding\n\t\tthis.el.style.height = this.el.style.overflow = ''; // Remove the overflow hidden and the fixed height\n\t}\n}\n\ndocument.querySelectorAll('details').forEach((el) => {\n\tnew Accordion(el);\n});"],"names":["Accordion","el","e","startHeight","endHeight","open"],"mappings":"AAUA,MAAMA,CAAU,CACf,YAAYC,EAAI,CACf,KAAK,GAAcA,EACnB,KAAK,QAAcA,EAAG,cAAc,SAAS,EAC7C,KAAK,QAAcA,EAAG,cAAc,UAAU,EAC9C,KAAK,UAAc,KACnB,KAAK,UAAc,GACnB,KAAK,YAAc,GAEnB,KAAK,QAAQ,iBAAiB,QAAUC,GAAM,KAAK,QAAQA,CAAC,CAAC,CAC7D,CAED,QAAQA,EAAG,CACVA,EAAE,eAAc,EAChB,KAAK,GAAG,MAAM,SAAW,SAErB,KAAK,WAAa,CAAC,KAAK,GAAG,KAC9B,KAAK,KAAI,GACC,KAAK,aAAe,KAAK,GAAG,OACtC,KAAK,OAAM,CAEZ,CAED,QAAS,CACR,KAAK,UAAY,GAEjB,MAAMC,EAAc,GAAG,KAAK,GAAG,iBACzBC,EAAc,GAAG,KAAK,QAAQ,iBAEhC,KAAK,WACR,KAAK,UAAU,SAGhB,KAAK,UAAY,KAAK,GAAG,QAAQ,CAChC,OAAQ,CAACD,EAAaC,CAAS,CAClC,EAAK,CACF,SAAU,IACV,OAAQ,UACX,CAAG,EAED,KAAK,UAAU,SAAW,IAAM,KAAK,kBAAkB,EAAK,EAC5D,KAAK,UAAU,SAAW,IAAM,KAAK,UAAY,EACjD,CAED,MAAO,CACN,KAAK,GAAG,MAAM,OAAS,GAAG,KAAK,GAAG,iBAClC,KAAK,GAAG,KAAe,GAEvB,OAAO,sBAAsB,IAAM,KAAK,OAAQ,CAAA,CAChD,CAED,QAAS,CACR,KAAK,YAAc,GACnB,MAAMD,EAAmB,GAAG,KAAK,GAAG,iBAC9BC,EAAmB,GAAG,KAAK,QAAQ,aAAe,KAAK,QAAQ,iBAEjE,KAAK,WACR,KAAK,UAAU,SAGhB,KAAK,UAAY,KAAK,GAAG,QAAQ,CAChC,OAAQ,CAACD,EAAaC,CAAS,CAClC,EAAK,CACF,SAAU,IACV,OAAQ,UACX,CAAG,EAED,KAAK,UAAU,SAAW,IAAM,KAAK,kBAAkB,EAAI,EAC3D,KAAK,UAAU,SAAW,IAAM,KAAK,YAAc,EACnD,CAED,kBAAkBC,EAAM,CACvB,KAAK,GAAG,KAAeA,EACvB,KAAK,UAAkB,KACvB,KAAK,UAAkB,GACvB,KAAK,YAAkB,GACvB,KAAK,GAAG,MAAM,OAAS,KAAK,GAAG,MAAM,SAAW,EAChD,CACF,CAEA,SAAS,iBAAiB,SAAS,EAAE,QAASJ,GAAO,CACpD,IAAID,EAAUC,CAAE,CACjB,CAAC"}