'use strict';

var index = require('./index-Bkm7eeWO.js');

const EclTimelineItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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 (index.h("li", { key: '0b710c2817714299507570dfea63635d863d4af9', class: this.getClass(), id: this.elId }, this.type !== 'toggle' ?
            index.h("div", { class: `ecl-timeline__tooltip sc-ecl-timeline-${this.theme}` }, index.h("div", { class: `ecl-timeline__tooltip-arrow sc-ecl-timeline-${this.theme}` }), this.label ?
                index.h("div", { class: `ecl-timeline__label sc-ecl-timeline-${this.theme}` }, this.label) : '', this.itemTitle ?
                index.h("div", { class: `ecl-timeline__title sc-ecl-timeline-${this.theme}` }, this.itemTitle) : '', index.h("div", { class: `ecl-timeline__content sc-ecl-timeline-${this.theme}` }, index.h("slot", null))) : '', this.type === 'toggle' ?
            index.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 }, index.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) : ''));
    }
    get el() { return index.getElement(this); }
};

exports.ecl_timeline_item = EclTimelineItem;
