atomicuilibrary 0.0.1

package/dist/collection/components/timeline/timeline.js

@@ -0,0 +1,889 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Timeline {
+    /** Events definition */
+    events = [];
+    normalizedEvents = [];
+    /** Flow type */
+    flow = 'linear';
+    /** Layout mode */
+    mode = 'vertical';
+    /** Alignment/Positioning */
+    align = 'left';
+    /** Theme variables */
+    theme;
+    /** Multi-line wrapping */
+    multiline = false;
+    columns = 4;
+    /** Visual Variant */
+    variant = 'default';
+    /** Marker Type */
+    marker = 'dot';
+    /** Whether items are interactive/clickable (Premium) */
+    clickable = false;
+    /** Reverse the order of events */
+    reverse = false;
+    /** Display a pending state at the end (dashed line) */
+    pending = false;
+    /** Enable integrated search filtering (Premium) */
+    searchable = false;
+    lineColor = '#3bf673';
+    lineWidth = 2;
+    dotSize = 12;
+    dotColor = '#3bf673';
+    showLine = true;
+    showDots = true;
+    animateOnScroll = false;
+    compact = false;
+    wrap = false;
+    showDates = true;
+    dateFormat = 'short';
+    iconPosition = 'center';
+    activeItemId;
+    visibleItems = new Set();
+    searchQuery = '';
+    /** Emitted when a timeline item becomes visible (for animation) */
+    itemVisible;
+    /** Emitted when an item is clicked */
+    itemClick;
+    el;
+    /** Watch for events prop changes */
+    normalizeEvents(newEvents) {
+        if (typeof newEvents === 'string') {
+            try {
+                this.normalizedEvents = JSON.parse(newEvents);
+            }
+            catch {
+                this.normalizedEvents = [];
+            }
+        }
+        else {
+            this.normalizedEvents = newEvents || [];
+        }
+    }
+    isRtl = false;
+    isMobile = false;
+    observer;
+    componentWillLoad() {
+        this.normalizeEvents(this.events);
+    }
+    componentDidLoad() {
+        if (this.animateOnScroll) {
+            this.setupIntersectionObserver();
+        }
+        this.checkMobile();
+        this.checkRtl();
+        window.addEventListener('resize', this.handleResize);
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        window.removeEventListener('resize', this.handleResize);
+    }
+    handleResize = () => {
+        this.checkMobile();
+    };
+    checkMobile() {
+        // Arbitrary default breakpoint similar to set-ui-lib if not defined
+        this.isMobile = window.innerWidth <= 768;
+    }
+    checkRtl() {
+        this.isRtl = getComputedStyle(this.el).direction === 'rtl'
+            || this.el.closest('[dir="rtl"]') !== null
+            || document.documentElement.dir === 'rtl';
+    }
+    setupIntersectionObserver() {
+        if (typeof globalThis.IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const itemId = entry.target.getAttribute('data-item-id');
+                    const indexStr = entry.target.getAttribute('data-item-index');
+                    if (itemId || indexStr) {
+                        const id = itemId || indexStr;
+                        this.visibleItems = new Set([...this.visibleItems, id]);
+                        const index = parseInt(indexStr || '0', 10);
+                        const ev = this.normalizedEvents[index];
+                        if (ev) {
+                            this.itemVisible.emit({ item: ev, index });
+                        }
+                    }
+                }
+            });
+        }, { threshold: 0.2 });
+    }
+    getProcessedEvents() {
+        let list = [...this.normalizedEvents];
+        if (this.searchable && this.searchQuery) {
+            const query = this.searchQuery.toLowerCase();
+            list = list.filter(e => e.label.toLowerCase().includes(query) ||
+                (e.description && e.description.toLowerCase().includes(query)) ||
+                (e.opposite && typeof e.opposite === 'string' && e.opposite.toLowerCase().includes(query)) ||
+                (e.customContent && e.customContent.toLowerCase().includes(query)));
+        }
+        if (this.reverse) {
+            list.reverse();
+        }
+        return list;
+    }
+    handleSearch = (ev) => {
+        this.searchQuery = ev.detail;
+    };
+    handleItemClick = (event) => {
+        if (this.clickable) {
+            this.itemClick.emit(event);
+        }
+    };
+    render() {
+        const events = this.getProcessedEvents();
+        const orientation = this.isMobile && this.compact ? 'vertical' : this.mode;
+        const containerClass = [
+            'timeline-container',
+            `timeline-${orientation}`,
+            `timeline-align-${this.align}`,
+            (this.multiline || this.wrap) && 'timeline-multiline',
+            `timeline-variant-${this.variant}`,
+            `timeline-marker-${this.marker}`,
+            this.clickable && 'timeline-clickable',
+            this.animateOnScroll && 'timeline-animated',
+            this.compact && 'timeline-compact',
+            `timeline-icon-${this.iconPosition}`
+        ].filter(Boolean).join(' ');
+        const style = {
+            ...this.theme,
+            '--timeline-line-color': this.lineColor,
+            '--timeline-line-width': `${this.lineWidth}px`,
+            '--timeline-dot-size': `${this.dotSize}px`,
+            '--timeline-dot-color': this.dotColor,
+        };
+        const content = (orientation === 'horizontal' && (this.multiline || this.wrap))
+            ? this.renderMultiline(containerClass, events, style)
+            : (h("div", { class: containerClass, style: style }, events.map((event, i) => this.renderEventItem(event, i)), this.pending && this.renderPendingItem(events.length)));
+        return (h(Host, { key: '895dad278ac5ef9373c0053fe80f39d4c0850ba0' }, h("div", { key: '83841752c240e330781abd770ba5079305d18ced', class: "timeline-wrapper" }, this.searchable && (h("div", { key: '068ab74adbeb338f0ae91bb6f2d69ae91c426d2d', class: "timeline-search-header" }, h("ui-input", { key: '8c1e6d69c5f10e25e6abdab5eedd84a93727729b', type: "text", class: "timeline-search-input", placeholder: "Search events...", onInputChange: this.handleSearch, value: this.searchQuery, size: "sm", fullWidth: true }))), content)));
+    }
+    renderMultiline(containerClass, events, style) {
+        // Chunk events into rows based on columns
+        const columns = this.columns > 0 ? this.columns : 4;
+        const rows = [];
+        for (let i = 0; i < events.length; i += columns) {
+            rows.push(events.slice(i, i + columns));
+        }
+        return (h("div", { class: `${containerClass} ${this.wrap ? 'timeline-snake-container' : ''}`, style: style }, rows.map((rowEvents, rowIndex) => (h("div", { class: {
+                'timeline-row': true,
+                'timeline-row-even': rowIndex % 2 === 0,
+                'timeline-row-odd': rowIndex % 2 !== 0
+            } }, rowEvents.map((event, i) => {
+            const overallIndex = rowIndex * this.columns + i;
+            return this.renderEventItem(event, overallIndex, true, i === rowEvents.length - 1);
+        })))), this.pending && this.renderPendingItem(events.length, true)));
+    }
+    renderPendingItem(index, isMultiline = false) {
+        const isEven = this.isRtl ? index % 2 !== 0 : index % 2 === 0;
+        const side = this.align === 'alternate' ? (isEven ? 'left' : 'right') : this.align;
+        const hSide = this.align === 'alternate' ? (isEven ? 'top' : 'bottom') : (this.align === 'top' ? 'top' : 'bottom');
+        return (h("div", { class: {
+                'timeline-item': true,
+                'timeline-item-pending': true,
+                [`side-${side}`]: this.mode === 'vertical',
+                [`side-${hSide}`]: this.mode === 'horizontal',
+                'is-multiline': isMultiline
+            } }, h("div", { class: "timeline-item-line" }), h("div", { class: "timeline-item-dot" }, h("span", { class: "dot-inner" })), h("div", { class: "timeline-item-details" }, h("div", { class: "timeline-item-content" }, h("div", { class: "timeline-item-title" }, "Pending...")))));
+    }
+    renderEventItem(event, index, isMultiline = false, isLastInRow = false) {
+        const isAlternate = this.align === 'alternate';
+        // In RTL, flip the even/odd side assignment so the visual order mirrors correctly
+        const isEven = this.isRtl ? index % 2 !== 0 : index % 2 === 0;
+        const side = isAlternate ? (isEven ? 'left' : 'right') : this.align;
+        // For horizontal alignment: top/bottom/alternate mapping
+        const hSide = isAlternate
+            ? (isEven ? 'top' : 'bottom')
+            : (this.align === 'top' ? 'top' : 'bottom');
+        let dotContent;
+        const dotStyle = {};
+        if (event.dotColor)
+            dotStyle.borderColor = event.dotColor;
+        if (event.iconBackground)
+            dotStyle.backgroundColor = event.iconBackground;
+        const iconStyle = {};
+        if (event.iconColor)
+            iconStyle.color = event.iconColor;
+        if (event.image) {
+            dotContent = h("img", { src: event.image, alt: event.label, class: "timeline-item-image", width: "24", height: "24" });
+        }
+        else if (event.icon || this.marker === 'icon') {
+            dotContent = h("span", { class: "timeline-item-icon", style: iconStyle }, event.icon && event.icon.includes('<svg') ? h("span", { innerHTML: sanitizeHTML(event.icon) }) : h("ui-icon", { name: event.icon || 'default-icon', library: "fontawesome" }));
+        }
+        else if (this.marker === 'number') {
+            dotContent = h("span", { class: "timeline-item-number" }, index + 1);
+        }
+        else {
+            dotContent = h("span", { class: "dot-inner" });
+        }
+        const isVisible = this.visibleItems.has(event.id || index.toString());
+        const eventId = event.id || index.toString();
+        return (h("div", { "data-item-id": eventId, "data-item-index": index, ref: (el) => {
+                if (el && this.animateOnScroll && this.observer) {
+                    this.observer.observe(el);
+                }
+            }, class: [
+                'timeline-item',
+                `timeline-item-${event.status || 'default'}`,
+                index % 2 === 0 ? 'timeline-item-even' : 'timeline-item-odd',
+                `side-${side}`,
+                `side-${hSide}`,
+                isMultiline && isLastInRow && 'is-last-in-row',
+                !!event.image && 'has-image',
+                !!event.icon && 'has-icon',
+                this.marker === 'number' && !event.image && !event.icon && 'has-number',
+                this.clickable && 'timeline-item-clickable',
+                (event.status === 'active' || event.status === 'pending') && 'is-active',
+                this.animateOnScroll && 'timeline-item-animated',
+                (isVisible || !this.animateOnScroll) && 'timeline-item-visible',
+                this.align === 'center' && 'timeline-balanced-item',
+                !!event.position && `timeline-item-position-${event.position}`
+            ].filter(Boolean).join(' '), onClick: () => this.handleItemClick(event) }, h("div", { class: "timeline-side timeline-side-left" }, side === 'left' && event.opposite && h("span", { class: "timeline-opposite-content" }, event.opposite)), h("div", { class: "timeline-item-divider" }, this.showLine && h("div", { class: "timeline-item-line", style: { backgroundColor: event.lineColor || this.lineColor } }), h("div", { class: "timeline-item-dot", style: dotStyle }, dotContent, event.badge && h("span", { class: "timeline-badge" }, event.badge))), h("div", { class: "timeline-item-details timeline-side timeline-side-right" }, this.showDates && (event.date || event.time || event.timestamp) && (h("div", { class: "timeline-item-time" }, event.date && h("span", { class: "timeline-date-text" }, event.date, " "), event.time && h("span", { class: "timeline-time-text" }, event.time), !event.date && !event.time && event.timestamp && h("span", { class: "timeline-date-text" }, event.timestamp))), h("div", { class: "timeline-item-content" }, h("div", { class: "timeline-item-title" }, event.label), event.description && h("div", { class: "timeline-item-desc" }, event.description), event.customContent && h("div", { class: "timeline-custom-content", innerHTML: sanitizeHTML(event.customContent) })))));
+    }
+    static get is() { return "ui-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["timeline.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineEvent[] | string",
+                    "resolved": "TimelineEvent[] | string",
+                    "references": {
+                        "TimelineEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineEvent",
+                            "referenceLocation": "TimelineEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Events definition"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "events",
+                "defaultValue": "[]"
+            },
+            "flow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineFlow",
+                    "resolved": "\"linear\" | \"non-linear\"",
+                    "references": {
+                        "TimelineFlow": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineFlow",
+                            "referenceLocation": "TimelineFlow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flow type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow",
+                "defaultValue": "'linear'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'vertical'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | 'alternate' | FourSidePosition",
+                    "resolved": "\"alternate\" | \"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment/Positioning"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "theme": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineTheme",
+                    "resolved": "TimelineTheme",
+                    "references": {
+                        "TimelineTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineTheme",
+                            "referenceLocation": "TimelineTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variables"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multi-line wrapping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "4"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineVariant",
+                    "resolved": "\"default\" | \"dots-only\" | \"filled\" | \"minimal\" | \"outlined\" | \"panel\"",
+                    "references": {
+                        "TimelineVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineVariant",
+                            "referenceLocation": "TimelineVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "marker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineMarker",
+                    "resolved": "\"dot\" | \"icon\" | \"number\"",
+                    "references": {
+                        "TimelineMarker": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineMarker",
+                            "referenceLocation": "TimelineMarker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marker Type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marker",
+                "defaultValue": "'dot'"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether items are interactive/clickable (Premium)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "reverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reverse the order of events"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reverse",
+                "defaultValue": "false"
+            },
+            "pending": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display a pending state at the end (dashed line)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pending",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable integrated search filtering (Premium)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "lineColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "line-color",
+                "defaultValue": "'#3bf673'"
+            },
+            "lineWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "line-width",
+                "defaultValue": "2"
+            },
+            "dotSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-size",
+                "defaultValue": "12"
+            },
+            "dotColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-color",
+                "defaultValue": "'#3bf673'"
+            },
+            "showLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-line",
+                "defaultValue": "true"
+            },
+            "showDots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dots",
+                "defaultValue": "true"
+            },
+            "animateOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animate-on-scroll",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            },
+            "showDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dates",
+                "defaultValue": "true"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DateFormat",
+                    "resolved": "string",
+                    "references": {
+                        "DateFormat": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::DateFormat",
+                            "referenceLocation": "DateFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-format",
+                "defaultValue": "'short'"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineIconPosition",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {
+                        "TimelineIconPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TimelineIconPosition",
+                            "referenceLocation": "TimelineIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'center'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "normalizedEvents": {},
+            "activeItemId": {},
+            "visibleItems": {},
+            "searchQuery": {},
+            "isRtl": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemVisible",
+                "name": "itemVisible",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a timeline item becomes visible (for animation)"
+                },
+                "complexType": {
+                    "original": "{ item: TimelineEvent; index: number }",
+                    "resolved": "{ item: TimelineEvent; index: number; }",
+                    "references": {
+                        "TimelineEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineEvent",
+                            "referenceLocation": "TimelineEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is clicked"
+                },
+                "complexType": {
+                    "original": "TimelineEvent",
+                    "resolved": "TimelineEvent",
+                    "references": {
+                        "TimelineEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timeline/types.ts::TimelineEvent",
+                            "referenceLocation": "TimelineEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "events",
+                "methodName": "normalizeEvents"
+            }];
+    }
+}