'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-6377956f.js');

const EclTimelineItem = class {
  constructor(hostRef) {
    index.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 (index.h("li", { class: this.getClass() }, this.type !== 'toggle' ?
      index.h("div", { class: `ecl-timeline__tooltip` }, index.h("div", { class: `ecl-timeline__tooltip-arrow` }), this.label ?
        index.h("div", { class: `ecl-timeline__label` }, this.label) : '', this.itemTitle ?
        index.h("div", { class: `ecl-timeline__title` }, this.itemTitle) : '', index.h("div", { class: `ecl-timeline__content` }, index.h("slot", null))) : '', this.type === 'toggle' ?
      index.h("ecl-button", { variant: "secondary", "data-ecl-timeline-button": true }, index.h("ecl-icon", { styleClass: "ecl-button__icon--after", icon: "corner-arrow", size: "xs", transform: "rotate-180", slot: "icon-after" }), index.h("slot", null)) : ''));
  }
  get el() { return index.getElement(this); }
};

exports.ecl_timeline_item = EclTimelineItem;

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