@aqua-ds/web-components/components-build/aq-collapse-content.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const aqCollapseContentCss = ".aq-collapse-content{overflow:hidden;background-color:var(--color-white);-webkit-transition:200ms ease-out;transition:200ms ease-out;border-radius:0px 0px var(--spacing-size-minor) var(--spacing-size-minor)}.aq-collapse-content__inner{padding:var(--spacing-size-medium) var(--spacing-size-large);overflow-wrap:break-word}";

const AqCollapseContent$1 = /*@__PURE__*/ proxyCustomElement(class AqCollapseContent extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.isActive = false;
        this.isBooted = false;
        this.visible = false;
    }
    get getStyles() {
        return {
            'aq-collapse-content': true,
            'is-visible': this.visible,
        };
    }
    async updateActive(active) {
        this.isActive = active;
    }
    onIsActiveChange(newVal, oldVal) {
        if (newVal) {
            this.isBooted = true;
        }
        if (this.contentElement && this.visible) {
            this.contentElement.style.height = `${this.contentElement.scrollHeight}px`;
        }
        if (oldVal === null) {
            this.visible = newVal;
        }
        else {
            this.visible = newVal;
        }
    }
    beforeEnter(el) {
        el.style.height = '0';
    }
    enter(el) {
        el.style.height = `${el.scrollHeight}px`;
        setTimeout(() => {
            el.style.height = 'auto';
        }, 200);
    }
    beforeLeave(el) {
        el.style.height = `${el.scrollHeight}px`;
    }
    leave(el) {
        el.style.height = '0';
    }
    componentWillLoad() {
        this.visible = this.isActive;
        const collapse = this.el.closest('aq-collapse');
        if (collapse && collapse.registerContent)
            collapse.registerContent(this);
    }
    componentDidRender() {
        if (!this.contentElement)
            return;
        if (!this.visible) {
            this.beforeLeave(this.contentElement);
            this.leave(this.contentElement);
            return;
        }
        this.beforeEnter(this.contentElement);
        this.enter(this.contentElement);
    }
    render() {
        const styles = this.getStyles;
        return (h("div", { key: '0f90902b819c51ee290ebda5b2fa25b12ec0e531', class: styles, ref: el => (this.contentElement = el) }, h("div", { key: 'be47a03ed799b93617d030aedab67e35798a4773', class: "aq-collapse-content__inner" }, h("slot", { key: '4e60537a89c289be085d2ae1a51191e431f98a3b' }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "isActive": ["onIsActiveChange"]
    }; }
    static get style() { return aqCollapseContentCss; }
}, [260, "aq-collapse-content", {
        "isActive": [32],
        "isBooted": [32],
        "visible": [32],
        "updateActive": [64]
    }, undefined, {
        "isActive": ["onIsActiveChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-collapse-content"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-collapse-content":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqCollapseContent$1);
            }
            break;
    } });
}

const AqCollapseContent = AqCollapseContent$1;
const defineCustomElement = defineCustomElement$1;

export { AqCollapseContent, defineCustomElement };