import { r as registerInstance, h, H as Host, c as getElement } from './core-3f33e631.js';

const Accordion = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.animating = false;
    }
    async componentWillLoad() {
        return this.toggle(this.expanded);
    }
    disconnectedCallback() {
        window.clearTimeout(this.timer);
    }
    async toggle(event) {
        if (this.animating)
            return;
        const toggle = event instanceof CustomEvent ? event.target : this.getToggle();
        toggle.expanded = event instanceof CustomEvent ? !this.expanded : event;
        return this.slide(toggle.expanded);
    }
    async slide(expanding) {
        const wrapper = this.getWrapper();
        if (!wrapper)
            return;
        this.animating = true;
        if (!expanding) {
            wrapper.style.height = this.getContentHeight();
        }
        return new Promise((resolve) => {
            window.setTimeout(() => {
                wrapper.style.height = expanding ? this.getContentHeight() : '0';
                this.timer = window.setTimeout(() => {
                    this.expanded = expanding;
                    this.animating = false;
                    wrapper.style.height = null;
                    resolve();
                }, 500);
            }, 50);
        });
    }
    getToggle() {
        return this.element.querySelector('anj-accordion-toggle');
    }
    getWrapper() {
        return this.element.querySelector('.anj-accordion-wrapper');
    }
    getContentHeight() {
        return `${this.element.querySelector('.anj-accordion-content').offsetHeight}px`;
    }
    render() {
        return (h(Host, { class: { 'anj-animate': this.animating } }, h("div", { class: "anj-accordion-header" }, h("slot", { name: "header" })), h("div", { class: "anj-accordion-wrapper" }, h("div", { class: "anj-accordion-content" }, h("slot", null)))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-accordion-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n  border-radius: 0.25rem;\n  background-clip: border-box;\n  background-color: var(--anj-light);\n}\n.sc-anj-accordion-h, .sc-anj-accordion-h::before, .sc-anj-accordion-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-accordion-h:focus, .sc-anj-accordion-h:active, .sc-anj-accordion-h *.sc-anj-accordion:focus, .sc-anj-accordion-h *.sc-anj-accordion:active {\n  outline: none;\n}\n.anj-animate.sc-anj-accordion-h .anj-accordion-header.sc-anj-accordion, [expanded].sc-anj-accordion-h .anj-accordion-header.sc-anj-accordion {\n  border-bottom: 1px solid var(--anj-border);\n}\n.anj-animate.sc-anj-accordion-h .anj-accordion-wrapper.sc-anj-accordion, [expanded].sc-anj-accordion-h .anj-accordion-wrapper.sc-anj-accordion {\n  display: block;\n}\n[expanded].sc-anj-accordion-h .anj-accordion-wrapper.sc-anj-accordion {\n  height: auto;\n}\n.anj-animate.sc-anj-accordion-h {\n  overflow: hidden;\n}\n\n.anj-accordion-header.sc-anj-accordion {\n  border-radius: 0.25rem 0.25rem 0 0;\n  margin-bottom: 0;\n  padding: 0.75rem 1.25rem;\n}\n\n.anj-accordion-wrapper.sc-anj-accordion {\n  display: none;\n  height: 0;\n  -webkit-transition: height 0.5s ease;\n  transition: height 0.5s ease;\n}"; }
};

export { Accordion as anj_accordion };
