import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';
import { d as defineCustomElement$1 } from './component2.js';

const styleCss = "x-collapse{display:block;position:relative;-webkit-transition:0.3s;transition:0.3s}.is-dark-mode x-collapse{color:var(--color-text-light, #FEFEFE)}x-collapse .collapse-header{position:relative;padding:0.5rem 0;line-height:1em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}x-collapse .collapse-header:hover:after{-webkit-animation:0.75s fadeBreathe infinite;animation:0.75s fadeBreathe infinite}x-collapse .collapse-header h4{margin:0}x-collapse .collapse-header .collapse-action{position:absolute;top:calc(50% - 0.5rem);right:0.75rem}x-collapse .collapse-container{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:0.3s;transition:0.3s;max-height:0;opacity:0;-webkit-transition:max-height 0.2s ease-out, opacity 0.2s;transition:max-height 0.2s ease-out, opacity 0.2s}x-collapse.collapse-expanded .collapse-container{opacity:1}";
const XCollapseStyle0 = styleCss;

const XCollapse = /*@__PURE__*/ proxyCustomElement(class XCollapse extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.header = undefined;
        this.show = false;
        this.expanded = false;
    }
    /**
     * Element toggle state
     */
    async toggle() {
        this.toggleCollapse();
    }
    /**
     * Watch expanded state changes
     */
    onExpandedChange() {
        this.updateCollapse();
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        this.container = this.el.querySelector('.collapse-container');
        if (this.show) {
            this.expanded = true;
        }
    }
    /**
     * Toggle the visibility of content
     */
    toggleCollapse() {
        this.expanded = !this.expanded;
    }
    updateCollapse() {
        const container = this.el.querySelector('.collapse-container');
        if (container.style.maxHeight) {
            this.hideCollapseContainer();
        }
        else {
            this.showCollapseContainer();
        }
    }
    hideCollapseContainer() {
        this.container.style.maxHeight = null;
        this.container.style.overflow = 'hidden';
    }
    showCollapseContainer() {
        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
        setTimeout(() => {
            this.container.style.overflow = 'auto';
        }, 200);
    }
    /**
     * Render component
     */
    render() {
        var _a;
        return h(Host, { key: '7feba7ba59c75bf8a540eaad5c245ee60a6e7dbe', class: cls({ 'collapse-expanded': this.expanded }) }, h("div", { key: 'bf223c645db369281efc5b860ccf8a5774434319', class: "collapse-header", onClick: () => this.toggleCollapse() }, ((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) ? h("h4", null, this.header) : h("slot", { name: "header" }), h("span", { key: '7c3e2e47cd45179bb9f6acb74f7dda3c5cea2655', class: "collapse-action" }, h("x-icon", { key: '9f276c390ecf465d05a5bfee93ebbe64e93a7438', name: this.expanded ? 'minus' : 'dropdown' }))), h("div", { key: 'bb3045c9580a34951b148a62933907daab875465', class: "collapse-container" }, h("slot", { key: 'a1873f0ffd1002a7b6691ecc68f0ae65eadd4c88' })));
    }
    get el() { return this; }
    static get watchers() { return {
        "expanded": ["onExpandedChange"]
    }; }
    static get style() { return XCollapseStyle0; }
}, [4, "x-collapse", {
        "header": [1],
        "show": [4],
        "expanded": [32],
        "toggle": [64]
    }, undefined, {
        "expanded": ["onExpandedChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-collapse", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-collapse":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XCollapse);
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { XCollapse as X, defineCustomElement as d };
