/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h, Host } from "@stencil/core";
import cn from "../../global/lib/cn";
import containerHasTag from "../../global/lib/container-has-tag";
export class ShiftSlider {
    async componentDidLoad() {
        this.flexibleContainerRef = this.el.getElementsByTagName('flexible-container')[0];
    }
    async onActiveIndexChange(newActiveIndex) {
        clearTimeout(this.ChildUpdatesActionTimeout);
        const newActiveElement = this.el.getElementsByClassName('element-number-' + newActiveIndex)[0];
        if (newActiveElement && containerHasTag(newActiveElement, 'flexible-container')) {
            this.flexibleContainerRef.stopAnimation = false;
            this.ChildUpdatesActionTimeout = setTimeout(() => {
                this.flexibleContainerRef.stopAnimation = true;
            }, 600);
        }
        else
            this.flexibleContainerRef.stopAnimation = false;
    }
    render() {
        return (h(Host, { key: '0e4b9e09b949824d216af9be2489541dc6472711', translate: "no" }, h("flexible-container", { key: 'c9fbeb11fc8d04286eb5ed40b08a2999245df80b', stopAnimation: true, classes: "relative" }, this.components.map((listElement, idx) => (h("div", { class: cn('w-full transition !duration-1000', 'element-number-' + idx, {
                'opacity-0 absolute top-0 !pointer-events-none [&_*]:!pointer-events-none': this.activeIndex !== idx,
                'translate-x-[110%]': this.activeIndex < idx,
                '-translate-x-[110%]': this.activeIndex > idx,
            }) }, listElement()))))));
    }
    static get is() { return "shift-slider"; }
    static get originalStyleUrls() {
        return {
            "$": ["shift-slider.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["shift-slider.css"]
        };
    }
    static get properties() {
        return {
            "components": {
                "type": "unknown",
                "attribute": "components",
                "mutable": false,
                "complexType": {
                    "original": "(() => Node)[]",
                    "resolved": "(() => Node)[]",
                    "references": {
                        "Node": {
                            "location": "global",
                            "id": "global::Node"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "activeIndex": {
                "type": "number",
                "attribute": "active-index",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "activeIndex",
                "methodName": "onActiveIndexChange"
            }];
    }
}
