import { h } from "@stencil/core";
export class EclTimelineItem {
    constructor() {
        this.elId = `ecl-timeline-item-${Date.now().toString(16) + Math.random().toString(16).slice(2, 10)}`;
    }
    getClass() {
        const styleClasses = [
            `ecl-timeline__item`,
            `sc-ecl-timeline-${this.theme}`,
            this.styleClass
        ];
        if (this.type === 'toggle') {
            styleClasses.push(`ecl-timeline__item--toggle`);
        }
        if (this.type === 'headline') {
            styleClasses.push(`ecl-timeline__item--headline`);
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidRender() {
        const element = this.el;
        if (element.querySelector('ecl-timeline__item--headline')) {
            element.parentElement.classList.add('ecl-timeline--has-headline');
        }
        let previousSibling = element.previousElementSibling;
        while (previousSibling) {
            if (previousSibling instanceof HTMLElement && previousSibling.getAttribute('type') === 'toggle') {
                this.el.firstElementChild.classList.add('ecl-timeline__item--collapsed');
                break;
            }
            previousSibling = previousSibling.previousElementSibling;
        }
    }
    render() {
        return (h("li", { key: '0b710c2817714299507570dfea63635d863d4af9', class: this.getClass(), id: this.elId }, this.type !== 'toggle' ?
            h("div", { class: `ecl-timeline__tooltip sc-ecl-timeline-${this.theme}` }, h("div", { class: `ecl-timeline__tooltip-arrow sc-ecl-timeline-${this.theme}` }), this.label ?
                h("div", { class: `ecl-timeline__label sc-ecl-timeline-${this.theme}` }, this.label) : '', this.itemTitle ?
                h("div", { class: `ecl-timeline__title sc-ecl-timeline-${this.theme}` }, this.itemTitle) : '', h("div", { class: `ecl-timeline__content sc-ecl-timeline-${this.theme}` }, h("slot", null))) : '', this.type === 'toggle' ?
            h("ecl-button", { theme: this.theme, variant: "secondary", "data-ecl-timeline-button": true, styleClass: `ecl-timeline__toggle sc-ecl-timeline-${this.theme}`, "data-ecl-label-expanded": this.toggleLabelExpanded, "data-ecl-label-collapsed": this.toggleLabelCollapsed }, h("ecl-icon", { styleClass: `ecl-button__icon--after sc-ecl-timeline-${this.theme}`, icon: "corner-arrow", size: "xs", rotate: "180", slot: "icon-after" }), this.toggleLabelCollapsed) : ''));
    }
    static get is() { return "ecl-timeline-item"; }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type"
            },
            "elId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "el-id",
                "defaultValue": "`ecl-timeline-item-${Date.now().toString(16) + Math.random().toString(16).slice(2,10)}`"
            },
            "itemTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "item-title"
            },
            "toggleLabelCollapsed": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "toggle-label-collapsed"
            },
            "toggleLabelExpanded": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "toggle-label-expanded"
            }
        };
    }
    static get elementRef() { return "el"; }
}
