import { r as registerInstance, h, c as getElement } from './index-0a3acb15.js';

const EclTimelineItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.theme = 'ec';
    this.styleClass = undefined;
    this.label = undefined;
    this.type = undefined;
    this.itemTitle = undefined;
  }
  getClass() {
    const styleClasses = [
      `ecl-timeline__item`,
      this.styleClass
    ];
    if (this.type === 'toggle') {
      styleClasses.push('ecl-timeline__item--toggle');
    }
    return styleClasses.join(' ');
  }
  componentDidRender() {
    if (this.el.parentElement.querySelector('.ecl-timeline__item--toggle') && this.type !== 'toggle') {
      this.el.firstElementChild.classList.add('ecl-timeline__item--collapsed');
    }
  }
  render() {
    return (h("li", { class: this.getClass() }, this.type !== 'toggle' ?
      h("div", { class: `ecl-timeline__tooltip` }, h("div", { class: `ecl-timeline__tooltip-arrow` }), this.label ?
        h("div", { class: `ecl-timeline__label` }, this.label) : '', this.itemTitle ?
        h("div", { class: `ecl-timeline__title` }, this.itemTitle) : '', h("div", { class: `ecl-timeline__content` }, h("slot", null))) : '', this.type === 'toggle' ?
      h("ecl-button", { variant: "secondary", "data-ecl-timeline-button": true }, h("ecl-icon", { styleClass: "ecl-button__icon--after", icon: "corner-arrow", size: "xs", transform: "rotate-180", slot: "icon-after" }), h("slot", null)) : ''));
  }
  get el() { return getElement(this); }
};

export { EclTimelineItem as ecl_timeline_item };

//# sourceMappingURL=ecl-timeline-item.entry.js.map