'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-d38772ff.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;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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.header = undefined;
        this.show = false;
        this.expanded = false;
    }
    /**
     * Element toggle state
     */
    async toggle() {
        this.toggleCollapse();
    }
    /**
     * Watch expanded state changes
     */
    watchExpanded() {
        this.updateCollapse();
    }
    /**
     * On component will load action
     */
    componentWillLoad() {
        if (this.show) {
            this.expanded = true;
        }
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        this.updateCollapse();
    }
    /**
     * Toggle the visibility of content
     */
    toggleCollapse() {
        this.expanded = !this.expanded;
    }
    /**
     * On update the colapse state
     */
    updateCollapse() {
        if (!this.container) {
            return;
        }
        this.expanded ?
            this.showCollapseContainer() :
            this.hideCollapseContainer();
    }
    /**
     * Hide the collapse container
     */
    hideCollapseContainer() {
        this.container.style.maxHeight = null;
        this.container.style.overflow = 'hidden';
    }
    /**
     * Show the collapse container
     */
    showCollapseContainer() {
        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
        setTimeout(() => {
            this.container.style.overflow = 'initial';
        }, 200);
    }
    /**
     * On keyboard action triggers the collapse
     */
    onCollapseKeyDown(e) {
        if (e.key === ' ' || e.key === 'Enter') {
            e.preventDefault();
            this.toggleCollapse();
        }
    }
    /**
     * Render component
     */
    render() {
        var _a;
        return index.h(index.Host, { key: '1e32b54d6dc9bad193526096c1738cde9873525c', class: helpers.cls({ 'collapse-expanded': this.expanded }) }, index.h("div", { key: 'a5c7c3b966b683029a6faca073a1126cf06e19c5', role: "switch", class: "collapse-header", tabIndex: 0, "aria-checked": this.expanded, onClick: () => this.toggleCollapse(), onKeyDown: (e) => this.onCollapseKeyDown(e) }, ((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) ? index.h("h4", null, this.header) : index.h("slot", { name: "header" }), index.h("span", { key: 'cf2da6ce35ac6a749d11935e7fbe90cf1fb05b1a', class: "collapse-action" }, index.h("x-icon", { key: '706b0c169f3eb4c3c637567a088fe64a877142d9', name: this.expanded ? 'minus' : 'dropdown' }))), index.h("div", { key: '60999c33b22d88ced7ca46668051f54fc30cec53', class: "collapse-container", ref: el => this.container = el }, index.h("slot", { key: '9dd2e245a7b613a2fae9e3f4b5c2214c8d2d7d74' })));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "expanded": ["watchExpanded"]
    }; }
};
XCollapse.style = XCollapseStyle0;

exports.x_collapse = XCollapse;
