/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h, Host } from "@stencil/core";
import cn from "../../global/lib/cn";
export class ShiftTabContent {
    constructor() {
        this.clearAnimationClasses = (elementName) => {
            const element = this.el.getElementsByClassName(`tab-${elementName}`)[0];
            element.classList.remove('slide-content-out');
            element.classList.remove('slide-content-in');
            return element;
        };
    }
    async onActiveIndexChange(newActiveComponent, oldActiveComponent) {
        this.lastActiveComponent = oldActiveComponent;
        clearTimeout(this.ChildUpdatesActionTimeout);
        const oldElement = this.clearAnimationClasses(oldActiveComponent);
        const newElement = this.clearAnimationClasses(newActiveComponent);
        oldElement.classList.add('slide-content-out');
        newElement.classList.add('slide-content-in');
    }
    render() {
        return (h(Host, { key: '71003b117755f90a5627f0462ec92f6940339353', translate: "no" }, h("flexible-container", { key: '1d98458f93153672e0e5108caf16cf53eeccef68' }, Object.entries(this.components).map(([componentName, component]) => (h("div", { onAnimationEnd: () => this.clearAnimationClasses(componentName), class: cn('!w-full transition !duration-0', `tab-${componentName}`, {
                'absolute opacity-0 top-0 !pointer-events-none [&_*]:!pointer-events-none translate-x-[-200%] translate-y-[200%]': componentName !== this.activeComponent,
            }) }, component))))));
    }
    static get is() { return "shift-tab-content"; }
    static get originalStyleUrls() {
        return {
            "$": ["shift-tab-content.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["shift-tab-content.css"]
        };
    }
    static get properties() {
        return {
            "activeComponent": {
                "type": "string",
                "attribute": "active-component",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "components": {
                "type": "unknown",
                "attribute": "components",
                "mutable": false,
                "complexType": {
                    "original": "{ [key: string]: Node }",
                    "resolved": "{ [key: string]: Node; }",
                    "references": {
                        "Node": {
                            "location": "global",
                            "id": "global::Node"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "lastActiveComponent": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "activeComponent",
                "methodName": "onActiveIndexChange"
            }];
    }
}
