import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './ecl-button2.js';
import { d as defineCustomElement$2 } from './ecl-icon2.js';

const EclTimelineItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    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 this; }
}, [4, "ecl-timeline-item", {
    "theme": [1],
    "styleClass": [1, "style-class"],
    "label": [1],
    "type": [1],
    "itemTitle": [1, "item-title"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["ecl-timeline-item", "ecl-button", "ecl-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "ecl-timeline-item":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, EclTimelineItem$1);
      }
      break;
    case "ecl-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "ecl-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const EclTimelineItem = EclTimelineItem$1;
const defineCustomElement = defineCustomElement$1;

export { EclTimelineItem, defineCustomElement };

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