import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';
import { d as defineCustomElement$3 } from './component6.js';
import { d as defineCustomElement$2 } from './component2.js';

const XTimeline = /*@__PURE__*/ proxyCustomElement(class XTimeline extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Element has not empty collapse slot
         */
        this.hasCollapseSlot = false;
        this.color = undefined;
        this.accent = undefined;
        this.time = undefined;
        this.meta = undefined;
    }
    /**
     * On component will be loaded hook
     */
    componentWillLoad() {
        this.hasCollapseSlot = !!this.el.querySelector('[slot="collapse"]');
    }
    parseTime(datetime) {
        const match = datetime.match(/(\d+:)/g);
        const minutes = parseInt(match[1]) || 0;
        const hours = parseInt(match[0]) || 0;
        const hour = hours === 0 ? 12 : hours;
        const clock = hours >= 12 ? 'PM' : 'AM';
        const formattedHours = hours > 12 ? hours - 12 : hour;
        return `${formattedHours}:${minutes.toString().padStart(2, '0')} <small>${clock}</small>`;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'bf9dee84622018ce828a91487c96b4b1dbf6f84c', class: cls(`timeline-color-${this.color}`, { 'timeline-bullet-accent': this.accent }) }, this.time && h("div", { key: '8721257b5d18a58e8a9d9d3fd8861033376c5968', class: "timeline-item-time", innerHTML: this.parseTime(this.time) }), h("div", { key: 'e940cf5d891b744b878494d8e6612a2c7b5ddb5d', class: "timeline-item-bullet" }), h("div", { key: '6795988bafe99278cd52115f73642296d9e7c44b', class: "timeline-item-body" }, this.hasCollapseSlot && h("x-collapse", { key: '292193b8d6359e6ea046a83d58b5569586b2ef12' }, h("div", { key: 'b2c8e155e18cc3f8ee8a956678c43fb0b7ec05e8', class: "timeline-item-header", slot: "header" }, h("div", { key: '6717f79a6031fad6cdb59800b0b0c6c96e8d1d47', class: "timeline-item-text" }, h("slot", { key: '899bbaa0d01402b20b348633730307b9c4b8ea08' })), this.meta && h("div", { key: 'ff621ab2b78d077de42009db2828babb733b0e7c', class: "timeline-item-meta", innerHTML: this.meta })), h("div", { key: '479b0fa5a1c0d906135e2caf010a47f33c8d23a8', class: "timeline-item-colapse" }, h("slot", { key: '3c21611176180f079dcd23bbe0ba93cbd586338a', name: "collapse" }))), !this.hasCollapseSlot && h("div", { key: '24f441702c35bed75afbdf202ef7f7b409c83f2b', class: "timeline-item-header" }, h("div", { key: '51282eb1ba9fb86019f62d6454d2b8fcd09560bf', class: "timeline-item-text" }, h("slot", { key: '40a0f37cb68603240c51cd28e5414fe1fda24121' })), this.meta && h("div", { key: '8ce1dd10aa9a60aa7f9556c39fa8e1a499dff090', class: "timeline-item-meta", innerHTML: this.meta }))));
    }
    get el() { return this; }
}, [4, "x-timeline-item", {
        "color": [1],
        "accent": [4],
        "time": [1],
        "meta": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-timeline-item", "x-collapse", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-timeline-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XTimeline);
            }
            break;
        case "x-collapse":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XTimelineItem = XTimeline;
const defineCustomElement = defineCustomElement$1;

export { XTimelineItem, defineCustomElement };
